/* AI Craftspeople Guild shared stylesheet */
/* Generated from formerly inline page styles. */

@keyframes fadeInPattern {
to { opacity: 1; }
}

@keyframes slideDown {
from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
}

@keyframes shimmer {
0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
}

@keyframes fadeInUp {
from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
}

@keyframes fadeInScale {
from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
}

@keyframes rotate {
from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
}

@keyframes expandHeight {
from { height: 0; }
            to { height: 100%; }
}

@keyframes highlightExpand {
to { background-size: 100% 100%; }
}

@keyframes fadeIn {
from { opacity: 0; }
            to { opacity: 1; }
}

@keyframes expandWidth {
to { width: 120%; }
}

@keyframes fadeInCard {
from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
}

@keyframes dots {
0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
}

/* acg-peer-reviews.html */
.page-acg-peer-reviews {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-knowledge: #3F6C8E;
}

.page-acg-peer-reviews,
.page-acg-peer-reviews * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-acg-peer-reviews {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-acg-peer-reviews::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-acg-peer-reviews header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-acg-peer-reviews header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-knowledge) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-acg-peer-reviews .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-acg-peer-reviews .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-acg-peer-reviews .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-acg-peer-reviews h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-acg-peer-reviews .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-acg-peer-reviews .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-acg-peer-reviews .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-acg-peer-reviews .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-acg-peer-reviews .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-acg-peer-reviews .back-link a:hover {
color: var(--color-rust);
}

.page-acg-peer-reviews .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-acg-peer-reviews .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-acg-peer-reviews .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-acg-peer-reviews .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-acg-peer-reviews .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-acg-peer-reviews .lead,
.page-acg-peer-reviews .callout,
.page-acg-peer-reviews .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-acg-peer-reviews .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-knowledge);
}

.page-acg-peer-reviews .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-acg-peer-reviews .lead p + p,
.page-acg-peer-reviews .callout p + p {
margin-top: 1rem;
}

.page-acg-peer-reviews .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-acg-peer-reviews .section {
margin-bottom: 4rem;
}

.page-acg-peer-reviews .section:last-of-type {
margin-bottom: 0;
}

.page-acg-peer-reviews .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-acg-peer-reviews .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-acg-peer-reviews .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-acg-peer-reviews .section p,
.page-acg-peer-reviews .section li,
.page-acg-peer-reviews .callout p {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-acg-peer-reviews .section p + p {
margin-top: 1rem;
}

.page-acg-peer-reviews .section ul,
.page-acg-peer-reviews .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-acg-peer-reviews .section li + li {
margin-top: 0.65rem;
}

.page-acg-peer-reviews strong {
color: var(--color-rust);
}

.page-acg-peer-reviews pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-acg-peer-reviews code {
font-family: 'Courier Prime', monospace;
}

.page-acg-peer-reviews .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-acg-peer-reviews .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(63, 108, 142, 0.22), transparent 55%);
}

.page-acg-peer-reviews .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-acg-peer-reviews .closing-statement p + p {
margin-top: 1rem;
}

.page-acg-peer-reviews .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-acg-peer-reviews .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-acg-peer-reviews .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-acg-peer-reviews .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-acg-peer-reviews .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-acg-peer-reviews .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-acg-peer-reviews .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-acg-peer-reviews .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-acg-peer-reviews .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-acg-peer-reviews .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-acg-peer-reviews .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-acg-peer-reviews footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-acg-peer-reviews footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-acg-peer-reviews footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-acg-peer-reviews footer a:hover {
color: var(--color-bronze);
}

.page-acg-peer-reviews .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-acg-peer-reviews .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-acg-peer-reviews header {
padding: 3rem 1.5rem 2rem;
    }

    .page-acg-peer-reviews .article-shell,
    .page-acg-peer-reviews .cta-section {
padding: 2rem 1.5rem;
    }

    .page-acg-peer-reviews .lead,
    .page-acg-peer-reviews .callout,
    .page-acg-peer-reviews .closing-statement {
padding: 1.5rem;
    }

    .page-acg-peer-reviews .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-acg-peer-reviews .btn {
width: 100%;
                max-width: 320px;
    }
}

/* ai-harness.html */
.page-ai-harness {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-ai-harness,
.page-ai-harness * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-ai-harness {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-ai-harness::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-ai-harness header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-ai-harness header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-ai-harness .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-ai-harness .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-ai-harness .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-ai-harness h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-ai-harness .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-ai-harness .article-meta {
display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0.9;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-ai-harness .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-ai-harness .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-ai-harness .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-ai-harness .back-link a:hover {
color: var(--color-rust);
}

.page-ai-harness .container {
max-width: 1040px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-ai-harness .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-ai-harness .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-ai-harness .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-ai-harness .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-ai-harness .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
}

.page-ai-harness .lead p {
font-size: 1.2rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-ai-harness .lead strong {
color: var(--color-rust);
}

.page-ai-harness .section {
margin-bottom: 4rem;
}

.page-ai-harness .section:last-of-type {
margin-bottom: 0;
}

.page-ai-harness .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-ai-harness .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-ai-harness .section p,
.page-ai-harness .section li,
.page-ai-harness .caption-note {
font-size: 1.08rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-ai-harness .section p + p {
margin-top: 1rem;
}

.page-ai-harness .section ul {
margin: 1rem 0 0 1.5rem;
}

.page-ai-harness .section li + li {
margin-top: 0.65rem;
}

.page-ai-harness strong {
color: var(--color-rust);
}

.page-ai-harness .support-note,
.page-ai-harness .callout {
padding: 1.6rem 1.7rem;
            margin: 2rem 0;
            background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-ai-harness .support-note p,
.page-ai-harness .callout p {
font-size: 1.04rem;
}

.page-ai-harness .figure-block {
margin: 2.5rem 0;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.8) 0%, white 100%);
            padding: 1.4rem;
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-ai-harness .figure-block a {
display: block;
            text-decoration: none;
}

.page-ai-harness .figure-block img {
display: block;
            width: 100%;
            height: auto;
            border: 1px solid rgba(166, 124, 82, 0.2);
}

.page-ai-harness .figure-block figcaption {
margin-top: 1rem;
            color: var(--color-graphite);
}

.page-ai-harness .figure-block strong {
display: inline-block;
            margin-bottom: 0.35rem;
}

.page-ai-harness pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 1rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
}

.page-ai-harness .principles {
display: grid;
            gap: 1.1rem;
            margin-top: 1.5rem;
}

.page-ai-harness .principle {
padding: 1.3rem 1.4rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.85) 0%, white 100%);
            border-top: 3px solid var(--color-bronze);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-ai-harness .principle h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.3rem;
            color: var(--color-ink);
            margin-bottom: 0.55rem;
}

.page-ai-harness .closing-statement {
margin-top: 2rem;
            padding: 2rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-ai-harness .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-ai-harness .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-ai-harness .closing-statement p + p {
margin-top: 1rem;
}

.page-ai-harness .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-ai-harness .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-ai-harness .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-ai-harness .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-ai-harness .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-ai-harness .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-ai-harness .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-ai-harness .btn-primary::before {
content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
}

.page-ai-harness .btn-primary:hover::before {
width: 300px;
            height: 300px;
}

.page-ai-harness .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-ai-harness .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-ai-harness .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-ai-harness .btn span {
position: relative;
            z-index: 1;
}

.page-ai-harness footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-ai-harness footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-ai-harness footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-ai-harness footer a:hover {
color: var(--color-bronze);
}

.page-ai-harness .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-ai-harness .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-ai-harness header {
padding: 3rem 1.5rem 2rem;
    }

    .page-ai-harness .article-shell,
    .page-ai-harness .cta-section {
padding: 2rem 1.5rem;
    }

    .page-ai-harness .lead,
    .page-ai-harness .support-note,
    .page-ai-harness .callout,
    .page-ai-harness .closing-statement {
padding: 1.5rem;
    }

    .page-ai-harness .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-ai-harness .btn {
width: 100%;
                max-width: 320px;
    }
}

/* ai-rituals.html */
.page-ai-rituals {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-accent: #356B6A;
}

.page-ai-rituals,
.page-ai-rituals * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-ai-rituals {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-ai-rituals::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-ai-rituals header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-ai-rituals header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 50%, var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-ai-rituals .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-ai-rituals .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-ai-rituals h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.08;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-ai-rituals .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 960px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-ai-rituals .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-ai-rituals .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-ai-rituals .back-link a:hover {
color: var(--color-rust);
}

.page-ai-rituals .container {
max-width: 1120px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-ai-rituals .intro-panel,
.page-ai-rituals .rituals-shell,
.page-ai-rituals .contribution-shell,
.page-ai-rituals .cta-section {
background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-ai-rituals .intro-panel {
margin: 5rem auto 2.5rem;
            padding: 3rem;
            border-left: 6px solid var(--color-accent);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-ai-rituals .rituals-shell,
.page-ai-rituals .contribution-shell,
.page-ai-rituals .cta-section {
padding: 3rem;
            opacity: 0;
            animation: fadeInScale 1s ease-out 1.15s forwards;
}

.page-ai-rituals .contribution-shell,
.page-ai-rituals .cta-section {
margin-top: 2.5rem;
}

.page-ai-rituals .intro-panel p,
.page-ai-rituals .ritual-card p,
.page-ai-rituals .contribution-shell p,
.page-ai-rituals .contribution-shell li,
.page-ai-rituals .cta-section p {
font-size: 1.08rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-ai-rituals .intro-panel p + p,
.page-ai-rituals .ritual-card p + p,
.page-ai-rituals .contribution-shell p + p,
.page-ai-rituals .contribution-shell li + li {
margin-top: 1rem;
}

.page-ai-rituals .section-heading {
text-align: center;
            margin-bottom: 2.5rem;
}

.page-ai-rituals .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-accent);
            margin-bottom: 0.8rem;
            position: relative;
            display: inline-block;
}

.page-ai-rituals .section-heading h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-ai-rituals .section-heading p {
color: var(--color-graphite);
            font-size: 1.05rem;
}

.page-ai-rituals .rituals-grid {
display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.5rem;
}

.page-ai-rituals .ritual-card {
padding: 2rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.92) 0%, white 100%);
            border-top: 4px solid var(--color-accent);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-ai-rituals .ritual-number {
display: inline-block;
            margin-bottom: 0.9rem;
            padding: 0.3rem 0.65rem;
            font-family: 'Courier Prime', monospace;
            background: rgba(53, 107, 106, 0.12);
            color: var(--color-accent);
            font-size: 0.92rem;
            font-weight: 700;
}

.page-ai-rituals .ritual-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.55rem;
            line-height: 1.2;
            color: var(--color-ink);
            margin-bottom: 0.8rem;
}

.page-ai-rituals .ritual-prompt {
margin-top: 1.2rem;
            padding: 1rem 1.1rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-rust);
}

.page-ai-rituals .ritual-prompt strong {
display: block;
            margin-bottom: 0.45rem;
            color: var(--color-rust);
}

.page-ai-rituals .ritual-prompt code {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            color: var(--color-ink);
            white-space: pre-wrap;
}

.page-ai-rituals .contribution-shell ul {
margin: 1rem 0 0 1.5rem;
}

.page-ai-rituals .contribution-shell strong {
color: var(--color-accent);
}

.page-ai-rituals .cta-section {
text-align: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
}

.page-ai-rituals .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-ai-rituals .cta-section h2,
.page-ai-rituals .cta-section p,
.page-ai-rituals .cta-buttons {
position: relative;
            z-index: 1;
}

.page-ai-rituals .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
}

.page-ai-rituals .cta-section p {
color: var(--color-bronze);
            margin-bottom: 2rem;
}

.page-ai-rituals .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
}

.page-ai-rituals .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
}

.page-ai-rituals .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-ai-rituals .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.35);
}

.page-ai-rituals .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-ai-rituals .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.3);
}

.page-ai-rituals footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-ai-rituals footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-ai-rituals footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-ai-rituals footer a:hover {
color: var(--color-bronze);
}

.page-ai-rituals .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-ai-rituals .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-ai-rituals header {
padding: 3rem 1.5rem 2rem;
    }

    .page-ai-rituals .rituals-grid {
grid-template-columns: 1fr;
    }

    .page-ai-rituals .container {
padding: 0 1rem;
    }

    .page-ai-rituals .intro-panel,
    .page-ai-rituals .rituals-shell,
    .page-ai-rituals .contribution-shell,
    .page-ai-rituals .cta-section {
padding: 2rem 1.5rem;
    }

    .page-ai-rituals .cta-buttons {
flex-direction: column;
    }

    .page-ai-rituals .btn {
width: 100%;
                text-align: center;
    }
}

/* aicraftspeopleguild-manifesto.html */
.page-aicraftspeopleguild-manifesto {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-aicraftspeopleguild-manifesto,
.page-aicraftspeopleguild-manifesto * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-aicraftspeopleguild-manifesto {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-aicraftspeopleguild-manifesto::before {
content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-aicraftspeopleguild-manifesto header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-aicraftspeopleguild-manifesto header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, 
                var(--color-rust) 0%, 
                var(--color-bronze) 50%, 
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-aicraftspeopleguild-manifesto .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-aicraftspeopleguild-manifesto .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-aicraftspeopleguild-manifesto h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
}

.page-aicraftspeopleguild-manifesto .subtitle {
font-family: 'Work Sans', sans-serif;
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 800px;
            margin: 0 auto 2rem;
            letter-spacing: 0.05em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-aicraftspeopleguild-manifesto .back-link {
text-align: center;
            margin-top: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-aicraftspeopleguild-manifesto .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-aicraftspeopleguild-manifesto .back-link a:hover {
color: var(--color-rust);
}

.page-aicraftspeopleguild-manifesto .container {
max-width: 900px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-aicraftspeopleguild-manifesto .manifesto-content {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow: 
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-aicraftspeopleguild-manifesto .manifesto-content h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 2rem;
            text-align: center;
            position: relative;
}

.page-aicraftspeopleguild-manifesto .manifesto-content h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-aicraftspeopleguild-manifesto .manifesto-intro {
font-size: 1.15rem;
            line-height: 1.8;
            color: var(--color-graphite);
            margin-bottom: 3rem;
            padding: 2rem;
            background: var(--color-parchment);
            border-left: 4px solid var(--color-rust);
}

.page-aicraftspeopleguild-manifesto .manifesto-section {
margin-bottom: 3rem;
}

.page-aicraftspeopleguild-manifesto .manifesto-section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--color-ink);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
}

.page-aicraftspeopleguild-manifesto .manifesto-section .icon {
font-size: 2rem;
}

.page-aicraftspeopleguild-manifesto .manifesto-section p {
font-size: 1.1rem;
            line-height: 1.8;
            color: var(--color-graphite);
            margin-bottom: 1rem;
}

.page-aicraftspeopleguild-manifesto .manifesto-section strong {
color: var(--color-rust);
            font-weight: 600;
}

.page-aicraftspeopleguild-manifesto .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-aicraftspeopleguild-manifesto .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-aicraftspeopleguild-manifesto .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-aicraftspeopleguild-manifesto .cta-section h2::after {
display: none;
}

.page-aicraftspeopleguild-manifesto .cta-section p {
font-size: 1.2rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-aicraftspeopleguild-manifesto .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-aicraftspeopleguild-manifesto .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-aicraftspeopleguild-manifesto .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-aicraftspeopleguild-manifesto .btn-primary::before {
content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
}

.page-aicraftspeopleguild-manifesto .btn-primary:hover::before {
width: 300px;
            height: 300px;
}

.page-aicraftspeopleguild-manifesto .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-aicraftspeopleguild-manifesto .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-aicraftspeopleguild-manifesto .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-aicraftspeopleguild-manifesto .btn span {
position: relative;
            z-index: 1;
}

.page-aicraftspeopleguild-manifesto footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-aicraftspeopleguild-manifesto footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-aicraftspeopleguild-manifesto footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-aicraftspeopleguild-manifesto footer a:hover {
color: var(--color-bronze);
}

.page-aicraftspeopleguild-manifesto .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-aicraftspeopleguild-manifesto .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-aicraftspeopleguild-manifesto header {
padding: 3rem 1.5rem 2rem;
    }

    .page-aicraftspeopleguild-manifesto .manifesto-content,
    .page-aicraftspeopleguild-manifesto .cta-section {
padding: 2rem 1.5rem;
    }

    .page-aicraftspeopleguild-manifesto .manifesto-intro {
padding: 1.5rem;
    }

    .page-aicraftspeopleguild-manifesto .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-aicraftspeopleguild-manifesto .btn {
width: 100%;
                max-width: 300px;
    }
}

/* charter.html */
.page-charter {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-charter,
.page-charter * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-charter {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-charter::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-charter header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-charter header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-charter .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-charter .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-charter h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
}

.page-charter .subtitle {
font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 840px;
            margin: 0 auto 2rem;
            letter-spacing: 0.05em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-charter .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-charter .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-charter .back-link a:hover {
color: var(--color-rust);
}

.page-charter .container {
max-width: 980px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-charter .charter-content {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-charter .charter-content h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 2rem;
            text-align: center;
            position: relative;
}

.page-charter .charter-content h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-charter .charter-intro {
font-size: 1.15rem;
            line-height: 1.8;
            color: var(--color-graphite);
            margin-bottom: 3rem;
            padding: 2rem;
            background: var(--color-parchment);
            border-left: 4px solid var(--color-rust);
}

.page-charter .charter-intro h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.75rem;
            color: var(--color-ink);
            margin-bottom: 1rem;
}

.page-charter .article {
margin-bottom: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(166, 124, 82, 0.25);
}

.page-charter .article:last-of-type {
margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
}

.page-charter .article-header {
display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.25rem;
}

.page-charter .article-number {
flex: 0 0 auto;
            min-width: 3rem;
            padding: 0.55rem 0.8rem;
            background: var(--color-rust);
            color: white;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-align: center;
}

.page-charter .article h3,
.page-charter .pillar h4,
.page-charter .role-card h4,
.page-charter .norm-item h4 {
font-family: 'Playfair Display', serif;
            color: var(--color-ink);
}

.page-charter .article h3 {
font-size: 1.9rem;
            line-height: 1.2;
}

.page-charter .article p,
.page-charter .article li,
.page-charter .pillar p,
.page-charter .role-card p,
.page-charter .norm-item p {
font-size: 1.08rem;
            line-height: 1.8;
            color: var(--color-graphite);
}

.page-charter .article p + p {
margin-top: 1rem;
}

.page-charter .article ul {
margin: 1rem 0 0 1.5rem;
}

.page-charter .article li + li {
margin-top: 0.75rem;
}

.page-charter .article strong,
.page-charter .pillar strong,
.page-charter .role-card strong,
.page-charter .norm-item strong {
color: var(--color-rust);
}

.page-charter .pillar-grid,
.page-charter .role-grid,
.page-charter .norm-grid {
display: grid;
            gap: 1.5rem;
            margin-top: 1.5rem;
}

.page-charter .pillar-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.page-charter .role-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.page-charter .norm-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.page-charter .pillar,
.page-charter .role-card,
.page-charter .norm-item {
padding: 1.5rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.85) 0%, white 100%);
            border-top: 3px solid var(--color-bronze);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-charter .pillar h4,
.page-charter .role-card h4,
.page-charter .norm-item h4 {
font-size: 1.35rem;
            margin-bottom: 0.75rem;
}

.page-charter .closing-affirmation {
margin-top: 1.5rem;
            padding: 2rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            color: var(--color-parchment);
            position: relative;
            overflow: hidden;
}

.page-charter .closing-affirmation::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-charter .closing-affirmation p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.15rem;
            line-height: 1.9;
}

.page-charter .closing-affirmation p + p {
margin-top: 1rem;
}

.page-charter .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-charter .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-charter .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-charter .cta-section h2::after {
display: none;
}

.page-charter .cta-section p {
font-size: 1.2rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-charter .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-charter .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-charter .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-charter .btn-primary::before {
content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
}

.page-charter .btn-primary:hover::before {
width: 300px;
            height: 300px;
}

.page-charter .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-charter .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-charter .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-charter .btn span {
position: relative;
            z-index: 1;
}

.page-charter footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-charter footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-charter footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-charter footer a:hover {
color: var(--color-bronze);
}

.page-charter .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-charter .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-charter header {
padding: 3rem 1.5rem 2rem;
    }

    .page-charter .charter-content,
    .page-charter .cta-section {
padding: 2rem 1.5rem;
    }

    .page-charter .charter-intro,
    .page-charter .closing-affirmation {
padding: 1.5rem;
    }

    .page-charter .article-header {
flex-direction: column;
                gap: 0.75rem;
    }

    .page-charter .article-number {
min-width: 0;
    }

    .page-charter .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-charter .btn {
width: 100%;
                max-width: 320px;
    }
}

/* chief-ai-skeptic-officer.html */
.page-chief-ai-skeptic-officer {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.95);
            --color-shadow: rgba(25, 22, 20, 0.1);
}

.page-chief-ai-skeptic-officer,
.page-chief-ai-skeptic-officer * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-chief-ai-skeptic-officer {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.75;
            overflow-x: hidden;
}

.page-chief-ai-skeptic-officer::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-chief-ai-skeptic-officer header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-chief-ai-skeptic-officer header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-chief-ai-skeptic-officer .guild-mark,
.page-chief-ai-skeptic-officer h1,
.page-chief-ai-skeptic-officer .subtitle,
.page-chief-ai-skeptic-officer .eyebrow {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-chief-ai-skeptic-officer .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-chief-ai-skeptic-officer .eyebrow {
margin-bottom: 0.8rem;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-bronze);
}

.page-chief-ai-skeptic-officer h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-chief-ai-skeptic-officer .subtitle {
max-width: 880px;
            margin: 0 auto;
            font-size: 1.15rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-chief-ai-skeptic-officer main {
position: relative;
            z-index: 1;
}

.page-chief-ai-skeptic-officer .container {
max-width: 980px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-chief-ai-skeptic-officer .intro-panel,
.page-chief-ai-skeptic-officer .section-shell,
.page-chief-ai-skeptic-officer .directive-shell,
.page-chief-ai-skeptic-officer .closing-shell,
.page-chief-ai-skeptic-officer .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-chief-ai-skeptic-officer .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
}

.page-chief-ai-skeptic-officer .section-shell,
.page-chief-ai-skeptic-officer .directive-shell,
.page-chief-ai-skeptic-officer .closing-shell,
.page-chief-ai-skeptic-officer .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-chief-ai-skeptic-officer .section-heading {
margin-bottom: 1.2rem;
}

.page-chief-ai-skeptic-officer .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-chief-ai-skeptic-officer .section-shell p + p,
.page-chief-ai-skeptic-officer .intro-panel p + p,
.page-chief-ai-skeptic-officer .closing-shell p + p,
.page-chief-ai-skeptic-officer .section-shell ul + p,
.page-chief-ai-skeptic-officer .section-shell p + ul {
margin-top: 1rem;
}

.page-chief-ai-skeptic-officer .section-shell ul {
margin-left: 1.4rem;
}

.page-chief-ai-skeptic-officer .section-shell li + li {
margin-top: 0.55rem;
}

.page-chief-ai-skeptic-officer .directive-shell {
background: linear-gradient(135deg, rgba(43, 122, 120, 0.1), rgba(194, 142, 80, 0.1));
}

.page-chief-ai-skeptic-officer .directive-label {
font-family: 'Courier Prime', monospace;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--color-rust);
            font-size: 0.95rem;
            margin-bottom: 0.6rem;
}

.page-chief-ai-skeptic-officer .directive-shell h2 {
font-family: 'Playfair Display', serif;
            font-size: 2.2rem;
            line-height: 1.12;
            margin-bottom: 0.7rem;
}

.page-chief-ai-skeptic-officer .directive-shell p {
font-size: 1.12rem;
            font-weight: 600;
            max-width: 820px;
}

.page-chief-ai-skeptic-officer .closing-shell {
border-left: 4px solid var(--color-rust);
            background: var(--color-highlight);
}

.page-chief-ai-skeptic-officer .cta-section {
text-align: center;
}

.page-chief-ai-skeptic-officer .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-chief-ai-skeptic-officer .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-chief-ai-skeptic-officer .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-chief-ai-skeptic-officer .btn:hover {
transform: translateY(-2px);
}

.page-chief-ai-skeptic-officer .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-chief-ai-skeptic-officer .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

@media (max-width: 768px) {
    .page-chief-ai-skeptic-officer header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-chief-ai-skeptic-officer .container {
padding: 0 1rem 3rem;
    }

    .page-chief-ai-skeptic-officer .intro-panel,
    .page-chief-ai-skeptic-officer .section-shell,
    .page-chief-ai-skeptic-officer .directive-shell,
    .page-chief-ai-skeptic-officer .closing-shell,
    .page-chief-ai-skeptic-officer .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-chief-ai-skeptic-officer .directive-shell h2 {
font-size: 1.9rem;
    }

    .page-chief-ai-skeptic-officer .cta-buttons {
flex-direction: column;
    }

    .page-chief-ai-skeptic-officer .btn {
width: 100%;
    }
}

/* code-of-conduct.html */
.page-code-of-conduct {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-code-of-conduct,
.page-code-of-conduct * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-code-of-conduct {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-code-of-conduct::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-code-of-conduct header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-code-of-conduct header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-code-of-conduct .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-code-of-conduct .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-code-of-conduct h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
}

.page-code-of-conduct .subtitle {
font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 840px;
            margin: 0 auto 2rem;
            letter-spacing: 0.05em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-code-of-conduct .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-code-of-conduct .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-code-of-conduct .back-link a:hover {
color: var(--color-rust);
}

.page-code-of-conduct .container {
max-width: 1020px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-code-of-conduct .document-content {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-code-of-conduct .document-nav {
display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-code-of-conduct .document-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.04em;
            padding: 0.85rem 1.25rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-code-of-conduct .document-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-code-of-conduct .document-block + .document-block {
margin-top: 4.5rem;
            padding-top: 4.5rem;
            border-top: 4px double rgba(166, 124, 82, 0.35);
}

.page-code-of-conduct .document-block h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 2rem;
            text-align: center;
            position: relative;
}

.page-code-of-conduct .document-block h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-code-of-conduct .intro-block,
.page-code-of-conduct .document-note {
font-size: 1.12rem;
            line-height: 1.8;
            color: var(--color-graphite);
            background: var(--color-parchment);
            border-left: 4px solid var(--color-rust);
            padding: 2rem;
}

.page-code-of-conduct .intro-block {
margin-bottom: 2rem;
}

.page-code-of-conduct .intro-block h3,
.page-code-of-conduct .document-note h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.75rem;
            color: var(--color-ink);
            margin-bottom: 1rem;
}

.page-code-of-conduct .document-note {
margin-bottom: 3rem;
}

.page-code-of-conduct .document-note p + p,
.page-code-of-conduct .intro-block p + p {
margin-top: 1rem;
}

.page-code-of-conduct .article {
margin-bottom: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(166, 124, 82, 0.25);
}

.page-code-of-conduct .document-block > .article:last-of-type {
margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
}

.page-code-of-conduct .article-header {
display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.25rem;
}

.page-code-of-conduct .article-number {
flex: 0 0 auto;
            min-width: 3rem;
            padding: 0.55rem 0.8rem;
            background: var(--color-rust);
            color: white;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-align: center;
}

.page-code-of-conduct .article h3,
.page-code-of-conduct .rule-item h4 {
font-family: 'Playfair Display', serif;
            color: var(--color-ink);
}

.page-code-of-conduct .article h3 {
font-size: 1.9rem;
            line-height: 1.2;
}

.page-code-of-conduct .article > p,
.page-code-of-conduct .rule-item p,
.page-code-of-conduct .article li,
.page-code-of-conduct .table-note,
.page-code-of-conduct .version-note {
font-size: 1.06rem;
            line-height: 1.8;
            color: var(--color-graphite);
}

.page-code-of-conduct .article > p + p {
margin-top: 1rem;
}

.page-code-of-conduct .rule-list {
display: grid;
            gap: 1rem;
            margin-top: 1.25rem;
}

.page-code-of-conduct .rule-item {
padding: 1.35rem 1.5rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.85) 0%, white 100%);
            border-top: 3px solid var(--color-bronze);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-code-of-conduct .rule-item h4 {
font-size: 1.25rem;
            margin-bottom: 0.6rem;
}

.page-code-of-conduct .rule-item p + p {
margin-top: 0.75rem;
}

.page-code-of-conduct .article ul,
.page-code-of-conduct .rule-item ul {
margin: 0.85rem 0 0 1.5rem;
}

.page-code-of-conduct .article li + li,
.page-code-of-conduct .rule-item li + li {
margin-top: 0.55rem;
}

.page-code-of-conduct strong {
color: var(--color-rust);
}

.page-code-of-conduct .table-wrap {
overflow-x: auto;
            margin-top: 1rem;
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-code-of-conduct table {
width: 100%;
            border-collapse: collapse;
            min-width: 680px;
            background: white;
}

.page-code-of-conduct thead {
background: var(--color-graphite);
            color: var(--color-parchment);
}

.page-code-of-conduct th,
.page-code-of-conduct td {
padding: 1rem;
            text-align: left;
            border-bottom: 1px solid rgba(166, 124, 82, 0.2);
            vertical-align: top;
}

.page-code-of-conduct tbody tr:nth-child(even) {
background: rgba(245, 241, 232, 0.55);
}

.page-code-of-conduct .table-note {
margin-top: 1rem;
}

.page-code-of-conduct .version-note {
margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(166, 124, 82, 0.25);
            text-align: center;
            letter-spacing: 0.04em;
}

.page-code-of-conduct .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-code-of-conduct .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-code-of-conduct .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-code-of-conduct .cta-section p {
font-size: 1.2rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-code-of-conduct .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-code-of-conduct .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-code-of-conduct .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-code-of-conduct .btn-primary::before {
content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
}

.page-code-of-conduct .btn-primary:hover::before {
width: 300px;
            height: 300px;
}

.page-code-of-conduct .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-code-of-conduct .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-code-of-conduct .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-code-of-conduct .btn span {
position: relative;
            z-index: 1;
}

.page-code-of-conduct footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-code-of-conduct footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-code-of-conduct footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-code-of-conduct footer a:hover {
color: var(--color-bronze);
}

.page-code-of-conduct .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-code-of-conduct .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-code-of-conduct header {
padding: 3rem 1.5rem 2rem;
    }

    .page-code-of-conduct .document-content,
    .page-code-of-conduct .cta-section {
padding: 2rem 1.5rem;
    }

    .page-code-of-conduct .intro-block,
    .page-code-of-conduct .document-note {
padding: 1.5rem;
    }

    .page-code-of-conduct .article-header {
flex-direction: column;
                gap: 0.75rem;
    }

    .page-code-of-conduct .article-number {
min-width: 0;
    }

    .page-code-of-conduct .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-code-of-conduct .btn {
width: 100%;
                max-width: 320px;
    }
}

/* decentralized-guild-web.html */
.page-decentralized-guild-web {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-decentralized-guild-web,
.page-decentralized-guild-web * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-decentralized-guild-web {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-decentralized-guild-web::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-decentralized-guild-web header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-decentralized-guild-web header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-decentralized-guild-web .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-decentralized-guild-web .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-decentralized-guild-web .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-decentralized-guild-web h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-decentralized-guild-web .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-decentralized-guild-web .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-decentralized-guild-web .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-decentralized-guild-web .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-decentralized-guild-web .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-decentralized-guild-web .back-link a:hover {
color: var(--color-rust);
}

.page-decentralized-guild-web .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-decentralized-guild-web .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-decentralized-guild-web .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-decentralized-guild-web .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-decentralized-guild-web .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-decentralized-guild-web .lead,
.page-decentralized-guild-web .callout,
.page-decentralized-guild-web .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-decentralized-guild-web .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
}

.page-decentralized-guild-web .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-decentralized-guild-web .lead p + p {
margin-top: 1rem;
}

.page-decentralized-guild-web .section {
margin-bottom: 4rem;
}

.page-decentralized-guild-web .section:last-of-type {
margin-bottom: 0;
}

.page-decentralized-guild-web .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-decentralized-guild-web .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-decentralized-guild-web .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-decentralized-guild-web .section p,
.page-decentralized-guild-web .section li,
.page-decentralized-guild-web .section td,
.page-decentralized-guild-web .section th {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-decentralized-guild-web .section p + p {
margin-top: 1rem;
}

.page-decentralized-guild-web .section ul {
margin: 1rem 0 0 1.5rem;
}

.page-decentralized-guild-web .section li + li {
margin-top: 0.65rem;
}

.page-decentralized-guild-web strong {
color: var(--color-rust);
}

.page-decentralized-guild-web .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-decentralized-guild-web pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-decentralized-guild-web code {
font-family: 'Courier Prime', monospace;
}

.page-decentralized-guild-web .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-decentralized-guild-web .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-decentralized-guild-web .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-decentralized-guild-web .closing-statement p + p {
margin-top: 1rem;
}

.page-decentralized-guild-web .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-decentralized-guild-web .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-decentralized-guild-web .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-decentralized-guild-web .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-decentralized-guild-web .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-decentralized-guild-web .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-decentralized-guild-web .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-decentralized-guild-web .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-decentralized-guild-web .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-decentralized-guild-web .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-decentralized-guild-web .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-decentralized-guild-web footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-decentralized-guild-web footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-decentralized-guild-web footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-decentralized-guild-web footer a:hover {
color: var(--color-bronze);
}

.page-decentralized-guild-web .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-decentralized-guild-web .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-decentralized-guild-web header {
padding: 3rem 1.5rem 2rem;
    }

    .page-decentralized-guild-web .article-shell,
    .page-decentralized-guild-web .cta-section {
padding: 2rem 1.5rem;
    }

    .page-decentralized-guild-web .lead,
    .page-decentralized-guild-web .callout,
    .page-decentralized-guild-web .closing-statement {
padding: 1.5rem;
    }

    .page-decentralized-guild-web .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-decentralized-guild-web .btn {
width: 100%;
                max-width: 320px;
    }
}

/* flywheel.html */
.page-flywheel {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.95);
            --color-shadow: rgba(25, 22, 20, 0.1);
            --color-code-bg: #11161B;
            --color-code-border: rgba(43, 122, 120, 0.24);
}

.page-flywheel,
.page-flywheel * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-flywheel {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.7;
            overflow-x: hidden;
}

.page-flywheel::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-flywheel header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-flywheel header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-flywheel .guild-mark,
.page-flywheel .subtitle,
.page-flywheel h1 {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-flywheel .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-flywheel h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.8rem, 7vw, 5rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-flywheel .subtitle {
max-width: 900px;
            margin: 0 auto;
            font-size: 1.15rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-flywheel main {
position: relative;
            z-index: 1;
}

.page-flywheel .container {
max-width: 1180px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-flywheel .intro-panel,
.page-flywheel .section-shell,
.page-flywheel .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-flywheel .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
}

.page-flywheel .intro-panel p + p,
.page-flywheel .section-shell p + p {
margin-top: 1rem;
}

.page-flywheel .badge-row {
display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 1.5rem;
}

.page-flywheel .badge {
display: inline-flex;
            align-items: center;
            padding: 0.4rem 0.85rem;
            background: rgba(25, 22, 20, 0.08);
            color: var(--color-graphite);
            font-family: 'Courier Prime', monospace;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
}

.page-flywheel .section-shell {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-flywheel .section-heading {
margin-bottom: 1.2rem;
}

.page-flywheel .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: 2.1rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-flywheel .section-heading p {
color: var(--color-graphite);
}

.page-flywheel .seed-shell {
background: linear-gradient(135deg, rgba(43, 122, 120, 0.1), rgba(194, 142, 80, 0.1));
}

.page-flywheel .two-up {
display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.2rem;
            margin-top: 1.2rem;
}

.page-flywheel .panel {
padding: 1.25rem;
            background: rgba(245, 241, 232, 0.92);
            border-top: 3px solid var(--color-bronze);
}

.page-flywheel .panel h3 {
font-family: 'Courier Prime', monospace;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--color-rust);
            margin-bottom: 0.6rem;
}

.page-flywheel pre {
margin-top: 1rem;
            padding: 1.25rem 1.3rem;
            background: var(--color-code-bg);
            color: #F6F2E9;
            border: 1px solid var(--color-code-border);
            overflow-x: auto;
            box-shadow: inset 0 0 0 1px rgba(194, 142, 80, 0.1);
}

.page-flywheel code,
.page-flywheel pre {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.65;
}

.page-flywheel .health-metric {
margin-top: 1.25rem;
            padding: 1rem 1.1rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-rust);
}

.page-flywheel .recursive-lines {
margin-top: 1.4rem;
            padding: 1.5rem 1.2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.08), rgba(194, 142, 80, 0.1));
            font-family: 'Courier Prime', monospace;
            font-size: 1rem;
            text-align: center;
            white-space: pre-line;
}

.page-flywheel .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
            text-align: center;
}

.page-flywheel .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-flywheel .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-flywheel .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-flywheel .btn:hover {
transform: translateY(-2px);
}

.page-flywheel .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-flywheel .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

.page-flywheel a {
color: var(--color-accent);
}

@media (max-width: 900px) {
    .page-flywheel .two-up {
grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-flywheel header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-flywheel .container {
padding: 0 1rem 3rem;
    }

    .page-flywheel .intro-panel,
    .page-flywheel .section-shell,
    .page-flywheel .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-flywheel .cta-buttons {
flex-direction: column;
    }

    .page-flywheel .btn {
width: 100%;
    }
}

/* grid-brain.html */
.page-grid-brain {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-note: #6B5CA5;
}

.page-grid-brain,
.page-grid-brain * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-grid-brain {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-grid-brain::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-grid-brain header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-grid-brain header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-note) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-grid-brain .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-grid-brain .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-grid-brain .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-grid-brain h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-grid-brain .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-grid-brain .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-grid-brain .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-grid-brain .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-grid-brain .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-grid-brain .back-link a:hover {
color: var(--color-rust);
}

.page-grid-brain .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-grid-brain .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-grid-brain .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-grid-brain .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-grid-brain .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-grid-brain .lead,
.page-grid-brain .callout,
.page-grid-brain .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-grid-brain .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-note);
}

.page-grid-brain .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-grid-brain .lead p + p,
.page-grid-brain .callout p + p {
margin-top: 1rem;
}

.page-grid-brain .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-grid-brain .section {
margin-bottom: 4rem;
}

.page-grid-brain .section:last-of-type {
margin-bottom: 0;
}

.page-grid-brain .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-grid-brain .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-grid-brain .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-grid-brain .section p,
.page-grid-brain .section li,
.page-grid-brain .callout p {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-grid-brain .section p + p {
margin-top: 1rem;
}

.page-grid-brain .section ul,
.page-grid-brain .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-grid-brain .section li + li {
margin-top: 0.65rem;
}

.page-grid-brain strong {
color: var(--color-rust);
}

.page-grid-brain pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-grid-brain code {
font-family: 'Courier Prime', monospace;
}

.page-grid-brain a.inline-link {
color: var(--color-rust);
            text-decoration: none;
            font-weight: 600;
}

.page-grid-brain a.inline-link:hover {
color: var(--color-note);
}

.page-grid-brain .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-grid-brain .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(107, 92, 165, 0.22), transparent 55%);
}

.page-grid-brain .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-grid-brain .closing-statement p + p {
margin-top: 1rem;
}

.page-grid-brain .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-grid-brain .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-grid-brain .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-grid-brain .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-grid-brain .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-grid-brain .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-grid-brain .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-grid-brain .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-grid-brain .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-grid-brain .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-grid-brain .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-grid-brain footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-grid-brain footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-grid-brain footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-grid-brain footer a:hover {
color: var(--color-bronze);
}

.page-grid-brain .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-grid-brain .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-grid-brain header {
padding: 3rem 1.5rem 2rem;
    }

    .page-grid-brain .article-shell,
    .page-grid-brain .cta-section {
padding: 2rem 1.5rem;
    }

    .page-grid-brain .lead,
    .page-grid-brain .callout,
    .page-grid-brain .closing-statement {
padding: 1.5rem;
    }

    .page-grid-brain .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-grid-brain .btn {
width: 100%;
                max-width: 320px;
    }
}

/* guild-chain.html */
.page-guild-chain {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-guild-chain,
.page-guild-chain * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-guild-chain {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-guild-chain::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-guild-chain header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-guild-chain header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-guild-chain .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-guild-chain .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-guild-chain .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-guild-chain h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-guild-chain .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-guild-chain .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-guild-chain .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-guild-chain .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-guild-chain .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-guild-chain .back-link a:hover {
color: var(--color-rust);
}

.page-guild-chain .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-guild-chain .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-guild-chain .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-guild-chain .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-guild-chain .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-guild-chain .lead,
.page-guild-chain .callout,
.page-guild-chain .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-guild-chain .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
}

.page-guild-chain .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-guild-chain .section {
margin-bottom: 4rem;
}

.page-guild-chain .section:last-of-type {
margin-bottom: 0;
}

.page-guild-chain .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-guild-chain .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-guild-chain .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-guild-chain .section p,
.page-guild-chain .section li,
.page-guild-chain .section td,
.page-guild-chain .section th {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-guild-chain .section p + p {
margin-top: 1rem;
}

.page-guild-chain .section ul {
margin: 1rem 0 0 1.5rem;
}

.page-guild-chain .section li + li {
margin-top: 0.65rem;
}

.page-guild-chain strong {
color: var(--color-rust);
}

.page-guild-chain .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-guild-chain pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-guild-chain .table-wrap {
overflow-x: auto;
            margin: 1.5rem 0;
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-guild-chain table {
width: 100%;
            min-width: 720px;
            border-collapse: collapse;
            background: white;
}

.page-guild-chain thead {
background: var(--color-graphite);
}

.page-guild-chain thead th {
color: var(--color-parchment);
            font-weight: 600;
}

.page-guild-chain th,
.page-guild-chain td {
padding: 1rem;
            text-align: left;
            vertical-align: top;
            border-bottom: 1px solid rgba(166, 124, 82, 0.2);
}

.page-guild-chain tbody tr:nth-child(even) {
background: rgba(245, 241, 232, 0.55);
}

.page-guild-chain .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-guild-chain .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-guild-chain .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-guild-chain .closing-statement p + p {
margin-top: 1rem;
}

.page-guild-chain .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-guild-chain .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-guild-chain .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-guild-chain .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-guild-chain .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-guild-chain .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-guild-chain .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-guild-chain .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-guild-chain .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-guild-chain .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-guild-chain .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-guild-chain footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-guild-chain footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-guild-chain footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-guild-chain footer a:hover {
color: var(--color-bronze);
}

.page-guild-chain .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-guild-chain .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-guild-chain header {
padding: 3rem 1.5rem 2rem;
    }

    .page-guild-chain .article-shell,
    .page-guild-chain .cta-section {
padding: 2rem 1.5rem;
    }

    .page-guild-chain .lead,
    .page-guild-chain .callout,
    .page-guild-chain .closing-statement {
padding: 1.5rem;
    }

    .page-guild-chain .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-guild-chain .btn {
width: 100%;
                max-width: 320px;
    }
}

/* guild-radar.html */
.page-guild-radar {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.95);
            --color-shadow: rgba(25, 22, 20, 0.1);
            --color-code-bg: #11161B;
            --color-code-border: rgba(43, 122, 120, 0.24);
}

.page-guild-radar,
.page-guild-radar * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-guild-radar {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.7;
            overflow-x: hidden;
}

.page-guild-radar::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-guild-radar header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-guild-radar header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-guild-radar .guild-mark,
.page-guild-radar h1,
.page-guild-radar .subtitle,
.page-guild-radar .badge-row {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-guild-radar .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-guild-radar h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.8rem, 7vw, 5rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-guild-radar .subtitle {
max-width: 900px;
            margin: 0 auto;
            font-size: 1.15rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-guild-radar .badge-row {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1.5rem;
}

.page-guild-radar .badge {
display: inline-flex;
            align-items: center;
            padding: 0.4rem 0.85rem;
            background: rgba(25, 22, 20, 0.08);
            color: rgba(245, 241, 232, 0.9);
            font-family: 'Courier Prime', monospace;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            border: 1px solid rgba(245, 241, 232, 0.14);
}

.page-guild-radar main {
position: relative;
            z-index: 1;
}

.page-guild-radar .container {
max-width: 1180px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-guild-radar .intro-panel,
.page-guild-radar .section-shell,
.page-guild-radar .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-guild-radar .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
}

.page-guild-radar .section-shell {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-guild-radar .section-heading {
margin-bottom: 1.2rem;
}

.page-guild-radar .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: 2.1rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-guild-radar .section-heading p {
color: var(--color-graphite);
}

.page-guild-radar .seed-shell {
background: linear-gradient(135deg, rgba(43, 122, 120, 0.1), rgba(194, 142, 80, 0.1));
}

.page-guild-radar .intro-panel p + p,
.page-guild-radar .section-shell p + p {
margin-top: 1rem;
}

.page-guild-radar pre {
margin-top: 1rem;
            padding: 1.25rem 1.3rem;
            background: var(--color-code-bg);
            color: #F6F2E9;
            border: 1px solid var(--color-code-border);
            overflow-x: auto;
            box-shadow: inset 0 0 0 1px rgba(194, 142, 80, 0.1);
}

.page-guild-radar code,
.page-guild-radar pre {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.65;
}

.page-guild-radar .health-metric {
margin-top: 1.25rem;
            padding: 1rem 1.1rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-rust);
}

.page-guild-radar .recursive-lines {
margin-top: 1.4rem;
            padding: 1.5rem 1.2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.08), rgba(194, 142, 80, 0.1));
            font-family: 'Courier Prime', monospace;
            font-size: 1rem;
            text-align: center;
            white-space: pre-line;
}

.page-guild-radar .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
            text-align: center;
}

.page-guild-radar .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-guild-radar .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-guild-radar .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-guild-radar .btn:hover {
transform: translateY(-2px);
}

.page-guild-radar .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-guild-radar .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

.page-guild-radar a {
color: var(--color-accent);
}

@media (max-width: 768px) {
    .page-guild-radar header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-guild-radar .container {
padding: 0 1rem 3rem;
    }

    .page-guild-radar .intro-panel,
    .page-guild-radar .section-shell,
    .page-guild-radar .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-guild-radar .cta-buttons {
flex-direction: column;
    }

    .page-guild-radar .btn {
width: 100%;
    }
}

/* hall-of-fame.html */
.page-hall-of-fame {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-accent: #2E6A57;
}

.page-hall-of-fame,
.page-hall-of-fame * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-hall-of-fame {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-hall-of-fame::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-hall-of-fame header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-hall-of-fame header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 50%, var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-hall-of-fame .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-hall-of-fame .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-hall-of-fame h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.08;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-hall-of-fame .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-hall-of-fame .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-hall-of-fame .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-hall-of-fame .back-link a:hover {
color: var(--color-rust);
}

.page-hall-of-fame .container {
max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-hall-of-fame .intro-panel,
.page-hall-of-fame .entries-shell,
.page-hall-of-fame .future-panel {
background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-hall-of-fame .intro-panel {
margin: 5rem auto 2.5rem;
            padding: 3rem;
            border-left: 6px solid var(--color-accent);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-hall-of-fame .entries-shell,
.page-hall-of-fame .future-panel {
padding: 3rem;
            opacity: 0;
            animation: fadeInScale 1s ease-out 1.15s forwards;
}

.page-hall-of-fame .future-panel {
margin-top: 2.5rem;
}

.page-hall-of-fame .intro-panel p,
.page-hall-of-fame .entry-card p,
.page-hall-of-fame .future-panel p {
font-size: 1.1rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-hall-of-fame .intro-panel p + p,
.page-hall-of-fame .future-panel p + p {
margin-top: 1rem;
}

.page-hall-of-fame .section-heading {
text-align: center;
            margin-bottom: 2.5rem;
}

.page-hall-of-fame .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-accent);
            margin-bottom: 0.8rem;
            position: relative;
            display: inline-block;
}

.page-hall-of-fame .section-heading h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-hall-of-fame .section-heading p {
color: var(--color-graphite);
            font-size: 1.05rem;
}

.page-hall-of-fame .entry-card {
padding: 2rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.9) 0%, white 100%);
            border-top: 4px solid var(--color-accent);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-hall-of-fame .entry-meta {
display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            color: var(--color-graphite);
            font-size: 0.95rem;
}

.page-hall-of-fame .entry-meta span {
padding: 0.35rem 0.65rem;
            background: rgba(46, 106, 87, 0.12);
}

.page-hall-of-fame .entry-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.85rem;
            line-height: 1.2;
            color: var(--color-ink);
            margin-bottom: 1rem;
}

.page-hall-of-fame .entry-card strong {
color: var(--color-accent);
}

.page-hall-of-fame .future-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
            margin-top: 1.5rem;
}

.page-hall-of-fame .future-slot {
padding: 1.35rem;
            border: 1px dashed rgba(46, 106, 87, 0.45);
            background: var(--color-highlight);
}

.page-hall-of-fame .future-slot-link {
display: block;
            color: inherit;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-hall-of-fame .future-slot-link:hover {
transform: translateY(-3px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-hall-of-fame .future-slot h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            color: var(--color-ink);
            margin-bottom: 0.5rem;
}

.page-hall-of-fame .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-hall-of-fame .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-hall-of-fame .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-hall-of-fame .cta-section p {
font-size: 1.15rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-hall-of-fame .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-hall-of-fame .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
}

.page-hall-of-fame .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-hall-of-fame .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.35);
}

.page-hall-of-fame .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-hall-of-fame .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.3);
}

.page-hall-of-fame footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-hall-of-fame footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-hall-of-fame footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-hall-of-fame footer a:hover {
color: var(--color-bronze);
}

.page-hall-of-fame .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-hall-of-fame .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-hall-of-fame header {
padding: 3rem 1.5rem 2rem;
    }

    .page-hall-of-fame .intro-panel,
    .page-hall-of-fame .entries-shell,
    .page-hall-of-fame .future-panel,
    .page-hall-of-fame .cta-section {
padding: 2rem 1.5rem;
    }

    .page-hall-of-fame .cta-buttons {
flex-direction: column;
    }

    .page-hall-of-fame .btn {
width: 100%;
                text-align: center;
    }
}

/* hall-of-shame.html */
.page-hall-of-shame {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-warning: #7C2319;
}

.page-hall-of-shame,
.page-hall-of-shame * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-hall-of-shame {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-hall-of-shame::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-hall-of-shame header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-hall-of-shame header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-rust) 50%, var(--color-bronze) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-hall-of-shame .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-hall-of-shame .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-hall-of-shame h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.08;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-hall-of-shame .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-hall-of-shame .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-hall-of-shame .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-hall-of-shame .back-link a:hover {
color: var(--color-rust);
}

.page-hall-of-shame .container {
max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-hall-of-shame .intro-panel,
.page-hall-of-shame .entries-shell,
.page-hall-of-shame .future-panel {
background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-hall-of-shame .intro-panel {
margin: 5rem auto 2.5rem;
            padding: 3rem;
            border-left: 6px solid var(--color-warning);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-hall-of-shame .entries-shell,
.page-hall-of-shame .future-panel {
padding: 3rem;
            opacity: 0;
            animation: fadeInScale 1s ease-out 1.15s forwards;
}

.page-hall-of-shame .future-panel {
margin-top: 2.5rem;
}

.page-hall-of-shame .intro-panel p,
.page-hall-of-shame .entry-card p,
.page-hall-of-shame .future-panel p {
font-size: 1.1rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-hall-of-shame .intro-panel p + p,
.page-hall-of-shame .future-panel p + p {
margin-top: 1rem;
}

.page-hall-of-shame .section-heading {
text-align: center;
            margin-bottom: 2.5rem;
}

.page-hall-of-shame .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-warning);
            margin-bottom: 0.8rem;
            position: relative;
            display: inline-block;
}

.page-hall-of-shame .section-heading h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-rust);
}

.page-hall-of-shame .section-heading p {
color: var(--color-graphite);
            font-size: 1.05rem;
}

.page-hall-of-shame .entry-card {
padding: 2rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.9) 0%, white 100%);
            border-top: 4px solid var(--color-warning);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-hall-of-shame .entry-meta {
display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            color: var(--color-graphite);
            font-size: 0.95rem;
}

.page-hall-of-shame .entry-meta span {
padding: 0.35rem 0.65rem;
            background: rgba(124, 35, 25, 0.12);
}

.page-hall-of-shame .entry-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.85rem;
            line-height: 1.2;
            color: var(--color-ink);
            margin-bottom: 1rem;
}

.page-hall-of-shame .entry-card strong {
color: var(--color-warning);
}

.page-hall-of-shame .future-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
            margin-top: 1.5rem;
}

.page-hall-of-shame .future-slot {
padding: 1.35rem;
            border: 1px dashed rgba(124, 35, 25, 0.45);
            background: var(--color-highlight);
}

.page-hall-of-shame .future-slot h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            color: var(--color-ink);
            margin-bottom: 0.5rem;
}

.page-hall-of-shame .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-hall-of-shame .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-hall-of-shame .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-hall-of-shame .cta-section p {
font-size: 1.15rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-hall-of-shame .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-hall-of-shame .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
}

.page-hall-of-shame .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-hall-of-shame .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.35);
}

.page-hall-of-shame .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-hall-of-shame .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.3);
}

.page-hall-of-shame footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-hall-of-shame footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-hall-of-shame footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-hall-of-shame footer a:hover {
color: var(--color-bronze);
}

.page-hall-of-shame .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-hall-of-shame .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-hall-of-shame header {
padding: 3rem 1.5rem 2rem;
    }

    .page-hall-of-shame .intro-panel,
    .page-hall-of-shame .entries-shell,
    .page-hall-of-shame .future-panel,
    .page-hall-of-shame .cta-section {
padding: 2rem 1.5rem;
    }

    .page-hall-of-shame .cta-buttons {
flex-direction: column;
    }

    .page-hall-of-shame .btn {
width: 100%;
                text-align: center;
    }
}

/* hushbell-full-spec.html */
.page-hushbell-full-spec {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.95);
            --color-shadow: rgba(25, 22, 20, 0.1);
            --color-code-bg: #11161B;
            --color-code-border: rgba(43, 122, 120, 0.24);
}

.page-hushbell-full-spec,
.page-hushbell-full-spec * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-hushbell-full-spec {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.7;
            overflow-x: hidden;
}

.page-hushbell-full-spec::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-hushbell-full-spec header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-hushbell-full-spec header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-hushbell-full-spec .guild-mark,
.page-hushbell-full-spec h1,
.page-hushbell-full-spec .subtitle {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-hushbell-full-spec .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-hushbell-full-spec h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.6rem, 6.4vw, 4.8rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-hushbell-full-spec .subtitle {
max-width: 980px;
            margin: 0 auto;
            font-size: 1.1rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-hushbell-full-spec main {
position: relative;
            z-index: 1;
}

.page-hushbell-full-spec .container {
max-width: 1080px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-hushbell-full-spec .intro-panel,
.page-hushbell-full-spec .section-shell,
.page-hushbell-full-spec .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-hushbell-full-spec .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.1), rgba(194, 142, 80, 0.1));
}

.page-hushbell-full-spec .section-shell {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-hushbell-full-spec .section-heading {
margin-bottom: 1.2rem;
}

.page-hushbell-full-spec .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: 2.1rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-hushbell-full-spec .section-heading p {
color: var(--color-graphite);
}

.page-hushbell-full-spec .section-shell p + p,
.page-hushbell-full-spec .intro-panel p + p {
margin-top: 1rem;
}

.page-hushbell-full-spec pre {
margin-top: 1rem;
            padding: 1.25rem 1.3rem;
            background: var(--color-code-bg);
            color: #F6F2E9;
            border: 1px solid var(--color-code-border);
            overflow-x: auto;
            box-shadow: inset 0 0 0 1px rgba(194, 142, 80, 0.1);
}

.page-hushbell-full-spec code,
.page-hushbell-full-spec pre {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.65;
}

.page-hushbell-full-spec .callout {
margin-top: 1.25rem;
            padding: 1rem 1.1rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-rust);
}

.page-hushbell-full-spec .closing-lines {
margin-top: 1.4rem;
            padding: 1.4rem 1.2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.08), rgba(194, 142, 80, 0.1));
            font-family: 'Courier Prime', monospace;
            font-size: 1rem;
            text-align: center;
            white-space: pre-line;
}

.page-hushbell-full-spec .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
            text-align: center;
}

.page-hushbell-full-spec .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-hushbell-full-spec .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-hushbell-full-spec .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-hushbell-full-spec .btn:hover {
transform: translateY(-2px);
}

.page-hushbell-full-spec .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-hushbell-full-spec .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

@media (max-width: 768px) {
    .page-hushbell-full-spec header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-hushbell-full-spec .container {
padding: 0 1rem 3rem;
    }

    .page-hushbell-full-spec .intro-panel,
    .page-hushbell-full-spec .section-shell,
    .page-hushbell-full-spec .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-hushbell-full-spec .cta-buttons {
flex-direction: column;
    }

    .page-hushbell-full-spec .btn {
width: 100%;
    }
}

/* hushbell.html */
.page-hushbell {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.95);
            --color-shadow: rgba(25, 22, 20, 0.1);
            --color-code-bg: #11161B;
            --color-code-border: rgba(43, 122, 120, 0.24);
}

.page-hushbell,
.page-hushbell * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-hushbell {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.7;
            overflow-x: hidden;
}

.page-hushbell::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-hushbell header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-hushbell header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-hushbell .guild-mark,
.page-hushbell h1,
.page-hushbell .subtitle {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-hushbell .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-hushbell h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.8rem, 7vw, 5rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-hushbell .subtitle {
max-width: 900px;
            margin: 0 auto;
            font-size: 1.15rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-hushbell main {
position: relative;
            z-index: 1;
}

.page-hushbell .container {
max-width: 1080px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-hushbell .intro-panel,
.page-hushbell .section-shell,
.page-hushbell .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-hushbell .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.1), rgba(194, 142, 80, 0.1));
}

.page-hushbell .section-shell {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-hushbell .section-heading {
margin-bottom: 1.2rem;
}

.page-hushbell .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: 2.1rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-hushbell .section-heading p {
color: var(--color-graphite);
}

.page-hushbell .section-shell p + p,
.page-hushbell .intro-panel p + p {
margin-top: 1rem;
}

.page-hushbell .number-list {
margin-left: 1.5rem;
}

.page-hushbell .number-list li + li {
margin-top: 0.7rem;
}

.page-hushbell pre {
margin-top: 1rem;
            padding: 1.25rem 1.3rem;
            background: var(--color-code-bg);
            color: #F6F2E9;
            border: 1px solid var(--color-code-border);
            overflow-x: auto;
            box-shadow: inset 0 0 0 1px rgba(194, 142, 80, 0.1);
}

.page-hushbell code,
.page-hushbell pre {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.65;
}

.page-hushbell .callout {
margin-top: 1.25rem;
            padding: 1rem 1.1rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-rust);
}

.page-hushbell .closing-lines {
margin-top: 1.4rem;
            padding: 1.4rem 1.2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.08), rgba(194, 142, 80, 0.1));
            font-family: 'Courier Prime', monospace;
            font-size: 1rem;
            text-align: center;
            white-space: pre-line;
}

.page-hushbell .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
            text-align: center;
}

.page-hushbell .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-hushbell .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-hushbell .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-hushbell .btn:hover {
transform: translateY(-2px);
}

.page-hushbell .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-hushbell .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

@media (max-width: 768px) {
    .page-hushbell header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-hushbell .container {
padding: 0 1rem 3rem;
    }

    .page-hushbell .intro-panel,
    .page-hushbell .section-shell,
    .page-hushbell .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-hushbell .cta-buttons {
flex-direction: column;
    }

    .page-hushbell .btn {
width: 100%;
    }
}

/* index.html */
.page-index {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-index,
.page-index * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-index {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-index::before {
content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-index header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-index header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, 
                var(--color-rust) 0%, 
                var(--color-bronze) 50%, 
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-index .top-nav {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.2s forwards;
}

.page-index .top-nav a {
color: var(--color-parchment);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.7rem 1rem;
            border: 1px solid rgba(166, 124, 82, 0.3);
            background: rgba(166, 124, 82, 0.08);
            transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.page-index .top-nav a:hover {
color: var(--color-highlight);
            background: rgba(166, 124, 82, 0.18);
            transform: translateY(-2px);
}

.page-index .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-index .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-index .guild-hero-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 2rem 0 0;
}

.page-index h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
}

.page-index .subtitle {
font-family: 'Work Sans', sans-serif;
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            letter-spacing: 0.05em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-index .container {
max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-index .context-section {
margin: 5rem auto;
            padding: 3rem;
            background: white;
            border-left: 6px solid var(--color-rust);
            box-shadow: 
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            position: relative;
            opacity: 0;
            animation: fadeInScale 1s ease-out 0.9s forwards;
}

.page-index .context-section::before {
content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: var(--color-rust);
            animation: expandHeight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s backwards;
}

.page-index .context-section p {
font-size: 1.15rem;
            line-height: 1.8;
            color: var(--color-graphite);
            font-weight: 400;
}

.page-index .context-section strong {
color: var(--color-rust);
            font-weight: 600;
            background: linear-gradient(120deg, var(--color-highlight) 0%, var(--color-highlight) 100%);
            background-repeat: no-repeat;
            background-size: 0% 100%;
            background-position: 0 0;
            padding: 0 0.2rem;
            animation: highlightExpand 1.5s ease-out 2s forwards;
}

.page-index .manifesto-section {
margin: 5rem auto;
            opacity: 0;
            animation: fadeIn 1s ease-out 1.1s forwards;
}

.page-index .manifesto-header {
text-align: center;
            margin-bottom: 4rem;
}

.page-index .manifesto-header h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
}

.page-index .manifesto-header h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 4px;
            background: var(--color-bronze);
            animation: expandWidth 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}

.page-index .manifesto-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
}

.page-index .manifesto-card {
background: white;
            padding: 2.5rem;
            border-radius: 0;
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 2px 8px var(--color-shadow);
            opacity: 0;
            animation: fadeInCard 0.8s ease-out forwards;
}

.page-index .manifesto-card:nth-child(1) {
animation-delay: 1.3s;
}

.page-index .manifesto-card:nth-child(2) {
animation-delay: 1.5s;
}

.page-index .manifesto-card:nth-child(3) {
animation-delay: 1.7s;
}

.page-index .manifesto-card:nth-child(4) {
animation-delay: 1.9s;
}

.page-index .manifesto-card::before {
content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--color-rust), var(--color-bronze));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-index .manifesto-card:hover {
transform: translateY(-8px);
            box-shadow: 
                0 8px 16px var(--color-shadow),
                0 16px 32px var(--color-shadow);
}

.page-index .manifesto-card:hover::before {
transform: scaleX(1);
}

.page-index .manifesto-card .icon {
font-size: 2.5rem;
            margin-bottom: 1.5rem;
            display: block;
}

.page-index .manifesto-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-ink);
            margin-bottom: 1rem;
            line-height: 1.3;
}

.page-index .manifesto-card p {
font-size: 1rem;
            line-height: 1.7;
            color: var(--color-graphite);
            font-weight: 300;
}

.page-index .manifesto-card strong {
font-weight: 600;
            color: var(--color-rust);
}

.page-index .manifesto-card-link {
text-decoration: none;
            color: inherit;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-index .manifesto-card-link::before {
background: linear-gradient(90deg, var(--color-bronze), var(--color-rust));
}

.page-index .manifesto-card-link:hover {
border-color: var(--color-rust);
            transform: translateY(-12px);
            box-shadow: 
                0 12px 24px var(--color-shadow),
                0 20px 40px var(--color-shadow);
}

.page-index .manifesto-card-link:hover::before {
transform: scaleX(1);
}

.page-index .manifesto-card-link .icon {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-index .manifesto-card-link:hover .icon {
transform: scale(1.2) rotate(5deg);
}

.page-index .signature-section {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow: 
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-index .signature-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-ink);
            text-align: center;
            margin-bottom: 1rem;
}

.page-index .signature-section > p {
text-align: center;
            color: var(--color-graphite);
            margin-bottom: 3rem;
            font-size: 1.1rem;
}

.page-index .signature-form {
max-width: 600px;
            margin: 0 auto 4rem;
            padding: 2rem;
            background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-index .form-group {
margin-bottom: 1.5rem;
}

.page-index .form-group label {
display: block;
            font-weight: 600;
            color: var(--color-ink);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
}

.page-index .form-group label .required {
color: var(--color-rust);
}

.page-index .form-group input {
width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid rgba(26, 22, 20, 0.1);
            background: white;
            font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
}

.page-index .form-group input:focus {
outline: none;
            border-color: var(--color-bronze);
            box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.1);
}

.page-index .form-group small {
display: block;
            margin-top: 0.25rem;
            color: var(--color-graphite);
            font-size: 0.85rem;
            opacity: 0.8;
}

.page-index .btn-sign {
width: 100%;
            background: var(--color-rust);
            color: white;
            padding: 1rem 2rem;
            border: none;
            font-family: 'Work Sans', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.05em;
            margin-top: 1rem;
}

.page-index .btn-sign:hover:not(:disabled) {
background: var(--color-graphite);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-index .btn-sign:disabled {
background: #ccc;
            cursor: not-allowed;
            transform: none;
}

.page-index .form-status {
margin-top: 1rem;
            padding: 1rem;
            text-align: center;
            border-radius: 4px;
            display: none;
}

.page-index .form-status.success {
background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            display: block;
}

.page-index .form-status.error {
background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            display: block;
}

.page-index .signatories-display {
margin-top: 3rem;
}

.page-index .signatories-display h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--color-rust);
            text-align: center;
            margin-bottom: 2rem;
}

.page-index .signatories-count {
text-align: center;
            font-size: 1.1rem;
            color: var(--color-graphite);
            margin-bottom: 2rem;
            font-weight: 600;
}

.page-index .signatories-grid {
display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            max-height: 600px;
            overflow-y: auto;
            padding: 1rem;
}

.page-index .signatory-card {
background: var(--color-parchment);
            padding: 1.5rem;
            border-left: 3px solid var(--color-bronze);
            transition: all 0.3s ease;
}

.page-index .signatory-card:hover {
transform: translateX(5px);
            border-left-color: var(--color-rust);
            box-shadow: 0 4px 8px var(--color-shadow);
}

.page-index .signatory-name {
font-weight: 600;
            color: var(--color-ink);
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
}

.page-index .signatory-title {
color: var(--color-graphite);
            font-size: 0.9rem;
            font-style: italic;
}

.page-index .signatory-org {
color: var(--color-bronze);
            font-size: 0.85rem;
            margin-top: 0.25rem;
}

.page-index .loading {
text-align: center;
            padding: 2rem;
            color: var(--color-graphite);
}

.page-index .loading::after {
content: '...';
            animation: dots 1.5s steps(4, end) infinite;
}

.page-index .cta-section {
margin: 6rem auto;
            padding: 4rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
            opacity: 0;
            animation: fadeInScale 1s ease-out 2.1s forwards;
}

.page-index .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-index .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-index .cta-section p {
font-size: 1.2rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
}

.page-index .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-index .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-index .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-index .btn-primary::before {
content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
}

.page-index .btn-primary:hover::before {
width: 300px;
            height: 300px;
}

.page-index .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-index .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-index .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-index .btn span {
position: relative;
            z-index: 1;
}

.page-index footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-index footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-index footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-index footer a:hover {
color: var(--color-bronze);
}

.page-index .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-index .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

.page-index .footer-links {
display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
}

.page-index .footer-links a {
padding: 0.35rem 0.8rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 999px;
}

.page-index .footer-links a:hover {
background: rgba(166, 124, 82, 0.2);
}

.page-index .worship-zone {
width: fit-content;
            max-width: 220px;
            margin: 0 auto 3rem;
            padding: 1rem 1rem 1.1rem;
            background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            text-align: center;
}

.page-index .worship-zone h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(0.9rem, 2vw, 1rem);
            font-weight: 700;
            color: var(--color-rust);
            line-height: 1.35;
            margin-bottom: 0.75rem;
}

.page-index .worship-zone figure {
max-width: 88px;
            margin: 0 auto;
}

.page-index .worship-zone img {
display: block;
            width: 100%;
            height: auto;
            box-shadow: 0 8px 16px var(--color-shadow);
}

@media (max-width: 768px) {
    .page-index header {
padding: 3rem 1.5rem 2rem;
    }

    .page-index .top-nav {
gap: 0.65rem;
                margin-bottom: 1.5rem;
    }

    .page-index .top-nav a {
width: calc(50% - 0.5rem);
                text-align: center;
                font-size: 0.85rem;
                padding: 0.75rem 0.8rem;
    }

    .page-index .context-section,
    .page-index .cta-section,
    .page-index .signature-section,
    .page-index .worship-zone {
padding: 2rem 1.5rem;
    }

    .page-index .worship-zone {
max-width: 200px;
                padding: 0.9rem;
    }

    .page-index .manifesto-grid {
grid-template-columns: 1fr;
    }

    .page-index .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-index .btn {
width: 100%;
                max-width: 300px;
    }

    .page-index .signature-form {
padding: 1.5rem;
    }

    .page-index .signatories-grid {
grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .page-index .scroll-reveal {
opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .page-index .scroll-reveal.revealed {
opacity: 1;
                transform: translateY(0);
    }
}

/* index_old.html */
.page-index-old {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-index-old,
.page-index-old * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-index-old {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-index-old::before {
content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-index-old header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-index-old header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, 
                var(--color-rust) 0%, 
                var(--color-bronze) 50%, 
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-index-old .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-index-old .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-index-old h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
}

.page-index-old .subtitle {
font-family: 'Work Sans', sans-serif;
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            letter-spacing: 0.05em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-index-old .container {
max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-index-old .context-section {
margin: 5rem auto;
            padding: 3rem;
            background: white;
            border-left: 6px solid var(--color-rust);
            box-shadow: 
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            position: relative;
            opacity: 0;
            animation: fadeInScale 1s ease-out 0.9s forwards;
}

.page-index-old .context-section::before {
content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: var(--color-rust);
            animation: expandHeight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s backwards;
}

.page-index-old .context-section p {
font-size: 1.15rem;
            line-height: 1.8;
            color: var(--color-graphite);
            font-weight: 400;
}

.page-index-old .context-section strong {
color: var(--color-rust);
            font-weight: 600;
            background: linear-gradient(120deg, var(--color-highlight) 0%, var(--color-highlight) 100%);
            background-repeat: no-repeat;
            background-size: 0% 100%;
            background-position: 0 0;
            padding: 0 0.2rem;
            animation: highlightExpand 1.5s ease-out 2s forwards;
}

.page-index-old .manifesto-section {
margin: 5rem auto;
            opacity: 0;
            animation: fadeIn 1s ease-out 1.1s forwards;
}

.page-index-old .manifesto-header {
text-align: center;
            margin-bottom: 4rem;
}

.page-index-old .manifesto-header h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
}

.page-index-old .manifesto-header h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 4px;
            background: var(--color-bronze);
            animation: expandWidth 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}

.page-index-old .manifesto-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
}

.page-index-old .manifesto-card {
background: white;
            padding: 2.5rem;
            border-radius: 0;
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 2px 8px var(--color-shadow);
            opacity: 0;
            animation: fadeInCard 0.8s ease-out forwards;
}

.page-index-old .manifesto-card:nth-child(1) {
animation-delay: 1.3s;
}

.page-index-old .manifesto-card:nth-child(2) {
animation-delay: 1.5s;
}

.page-index-old .manifesto-card:nth-child(3) {
animation-delay: 1.7s;
}

.page-index-old .manifesto-card:nth-child(4) {
animation-delay: 1.9s;
}

.page-index-old .manifesto-card::before {
content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--color-rust), var(--color-bronze));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-index-old .manifesto-card:hover {
transform: translateY(-8px);
            box-shadow: 
                0 8px 16px var(--color-shadow),
                0 16px 32px var(--color-shadow);
}

.page-index-old .manifesto-card:hover::before {
transform: scaleX(1);
}

.page-index-old .manifesto-card .icon {
font-size: 2.5rem;
            margin-bottom: 1.5rem;
            display: block;
}

.page-index-old .manifesto-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-ink);
            margin-bottom: 1rem;
            line-height: 1.3;
}

.page-index-old .manifesto-card p {
font-size: 1rem;
            line-height: 1.7;
            color: var(--color-graphite);
            font-weight: 300;
}

.page-index-old .manifesto-card strong {
font-weight: 600;
            color: var(--color-rust);
}

.page-index-old .signature-section {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow: 
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-index-old .signature-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-ink);
            text-align: center;
            margin-bottom: 1rem;
}

.page-index-old .signature-section > p {
text-align: center;
            color: var(--color-graphite);
            margin-bottom: 3rem;
            font-size: 1.1rem;
}

.page-index-old .signature-form {
max-width: 600px;
            margin: 0 auto 4rem;
            padding: 2rem;
            background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-index-old .form-group {
margin-bottom: 1.5rem;
}

.page-index-old .form-group label {
display: block;
            font-weight: 600;
            color: var(--color-ink);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
}

.page-index-old .form-group label .required {
color: var(--color-rust);
}

.page-index-old .form-group input {
width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid rgba(26, 22, 20, 0.1);
            background: white;
            font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
}

.page-index-old .form-group input:focus {
outline: none;
            border-color: var(--color-bronze);
            box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.1);
}

.page-index-old .form-group small {
display: block;
            margin-top: 0.25rem;
            color: var(--color-graphite);
            font-size: 0.85rem;
            opacity: 0.8;
}

.page-index-old .btn-sign {
width: 100%;
            background: var(--color-rust);
            color: white;
            padding: 1rem 2rem;
            border: none;
            font-family: 'Work Sans', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.05em;
            margin-top: 1rem;
}

.page-index-old .btn-sign:hover:not(:disabled) {
background: var(--color-graphite);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-index-old .btn-sign:disabled {
background: #ccc;
            cursor: not-allowed;
            transform: none;
}

.page-index-old .form-status {
margin-top: 1rem;
            padding: 1rem;
            text-align: center;
            border-radius: 4px;
            display: none;
}

.page-index-old .form-status.success {
background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            display: block;
}

.page-index-old .form-status.error {
background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            display: block;
}

.page-index-old .signatories-display {
margin-top: 3rem;
}

.page-index-old .signatories-display h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--color-rust);
            text-align: center;
            margin-bottom: 2rem;
}

.page-index-old .signatories-count {
text-align: center;
            font-size: 1.1rem;
            color: var(--color-graphite);
            margin-bottom: 2rem;
            font-weight: 600;
}

.page-index-old .signatories-grid {
display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            max-height: 600px;
            overflow-y: auto;
            padding: 1rem;
}

.page-index-old .signatory-card {
background: var(--color-parchment);
            padding: 1.5rem;
            border-left: 3px solid var(--color-bronze);
            transition: all 0.3s ease;
}

.page-index-old .signatory-card:hover {
transform: translateX(5px);
            border-left-color: var(--color-rust);
            box-shadow: 0 4px 8px var(--color-shadow);
}

.page-index-old .signatory-name {
font-weight: 600;
            color: var(--color-ink);
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
}

.page-index-old .signatory-title {
color: var(--color-graphite);
            font-size: 0.9rem;
            font-style: italic;
}

.page-index-old .signatory-org {
color: var(--color-bronze);
            font-size: 0.85rem;
            margin-top: 0.25rem;
}

.page-index-old .loading {
text-align: center;
            padding: 2rem;
            color: var(--color-graphite);
}

.page-index-old .loading::after {
content: '...';
            animation: dots 1.5s steps(4, end) infinite;
}

.page-index-old .cta-section {
margin: 6rem auto;
            padding: 4rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
            opacity: 0;
            animation: fadeInScale 1s ease-out 2.1s forwards;
}

.page-index-old .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-index-old .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-index-old .cta-section p {
font-size: 1.2rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
}

.page-index-old .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-index-old .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-index-old .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-index-old .btn-primary::before {
content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
}

.page-index-old .btn-primary:hover::before {
width: 300px;
            height: 300px;
}

.page-index-old .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-index-old .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-index-old .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-index-old .btn span {
position: relative;
            z-index: 1;
}

.page-index-old footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-index-old footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-index-old footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-index-old footer a:hover {
color: var(--color-bronze);
}

.page-index-old .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-index-old .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-index-old header {
padding: 3rem 1.5rem 2rem;
    }

    .page-index-old .context-section,
    .page-index-old .cta-section,
    .page-index-old .signature-section {
padding: 2rem 1.5rem;
    }

    .page-index-old .manifesto-grid {
grid-template-columns: 1fr;
    }

    .page-index-old .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-index-old .btn {
width: 100%;
                max-width: 300px;
    }

    .page-index-old .signature-form {
padding: 1.5rem;
    }

    .page-index-old .signatories-grid {
grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .page-index-old .scroll-reveal {
opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .page-index-old .scroll-reveal.revealed {
opacity: 1;
                transform: translateY(0);
    }
}

/* irrational-universe.html */
.page-irrational-universe {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-irrational-universe,
.page-irrational-universe * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-irrational-universe {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.65;
            overflow-x: hidden;
}

.page-irrational-universe::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-irrational-universe header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-irrational-universe header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-irrational-universe .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-irrational-universe .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-irrational-universe .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-irrational-universe h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.4rem, 6.4vw, 4.8rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-irrational-universe .subtitle {
font-size: clamp(1.02rem, 2.2vw, 1.3rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 980px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-irrational-universe .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-irrational-universe .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-irrational-universe .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-irrational-universe .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-irrational-universe .back-link a:hover {
color: var(--color-rust);
}

.page-irrational-universe .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-irrational-universe .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-irrational-universe .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-irrational-universe .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-irrational-universe .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-irrational-universe .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
            box-shadow: inset 0 1px 0 rgba(166, 124, 82, 0.15);
}

.page-irrational-universe .lead p + p {
margin-top: 1rem;
}

.page-irrational-universe .section {
margin-bottom: 3.5rem;
}

.page-irrational-universe .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(1.85rem, 3.3vw, 2.5rem);
            margin-bottom: 1rem;
            color: var(--color-ink);
}

.page-irrational-universe .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            margin: 1.4rem 0 0.7rem;
            color: var(--color-graphite);
}

.page-irrational-universe .section p + p {
margin-top: 1rem;
}

.page-irrational-universe .callout {
margin: 1.8rem 0;
            padding: 1.5rem 1.6rem;
            background: rgba(200, 75, 49, 0.08);
            border-left: 4px solid var(--color-rust);
}

.page-irrational-universe .callout p + p {
margin-top: 0.75rem;
}

.page-irrational-universe pre {
background: var(--color-graphite);
            color: #F7F3EE;
            padding: 1.4rem;
            overflow-x: auto;
            margin: 1.4rem 0;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.55;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            white-space: pre-wrap;
}

.page-irrational-universe code {
font-family: 'Courier Prime', monospace;
}

.page-irrational-universe .closing-statement {
margin: 2rem 0;
            padding: 1.8rem;
            background: linear-gradient(135deg, rgba(200, 75, 49, 0.08), rgba(166, 124, 82, 0.08));
            border: 1px solid rgba(166, 124, 82, 0.3);
}

.page-irrational-universe .cta-section {
margin: 0 auto 5rem;
            text-align: center;
            padding: 2.5rem;
            background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-irrational-universe .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.8rem;
}

.page-irrational-universe .cta-buttons {
display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
}

.page-irrational-universe .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.95rem 1.35rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.page-irrational-universe .btn:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-irrational-universe .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-irrational-universe .btn-secondary {
background: var(--color-highlight);
            color: var(--color-ink);
            border: 1px solid rgba(166, 124, 82, 0.35);
}

.page-irrational-universe footer {
position: relative;
            z-index: 1;
            padding: 3rem 2rem 4rem;
            text-align: center;
            color: var(--color-graphite);
}

.page-irrational-universe .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            color: var(--color-rust);
            text-decoration: none;
            font-weight: 600;
}

.page-irrational-universe .github-link:hover {
color: var(--color-bronze);
}

@media (max-width: 820px) {
    .page-irrational-universe header {
padding: 3rem 1.25rem 2.5rem;
    }

    .page-irrational-universe .container {
padding: 0 1rem;
    }

    .page-irrational-universe .article-shell {
margin: 3rem auto;
                padding: 2.2rem 1.35rem;
    }

    .page-irrational-universe .lead,
    .page-irrational-universe .callout,
    .page-irrational-universe .cta-section {
padding: 1.5rem;
    }

    .page-irrational-universe pre {
font-size: 0.87rem;
                padding: 1rem;
    }
}

/* konomi-standard.html */
.page-konomi-standard {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-konomi-standard,
.page-konomi-standard * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-konomi-standard {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-konomi-standard::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-konomi-standard header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-konomi-standard header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-konomi-standard .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-konomi-standard .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-konomi-standard .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-konomi-standard h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-konomi-standard .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-konomi-standard .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-konomi-standard .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-konomi-standard .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-konomi-standard .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-konomi-standard .back-link a:hover {
color: var(--color-rust);
}

.page-konomi-standard .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-konomi-standard .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-konomi-standard .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-konomi-standard .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-konomi-standard .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-konomi-standard .lead,
.page-konomi-standard .callout,
.page-konomi-standard .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-konomi-standard .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
}

.page-konomi-standard .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-konomi-standard .lead p + p {
margin-top: 1rem;
}

.page-konomi-standard .section {
margin-bottom: 4rem;
}

.page-konomi-standard .section:last-of-type {
margin-bottom: 0;
}

.page-konomi-standard .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-konomi-standard .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-konomi-standard .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-konomi-standard .section p,
.page-konomi-standard .section li {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-konomi-standard .section p + p {
margin-top: 1rem;
}

.page-konomi-standard .section ul,
.page-konomi-standard .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-konomi-standard .section li + li {
margin-top: 0.65rem;
}

.page-konomi-standard strong {
color: var(--color-rust);
}

.page-konomi-standard pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-konomi-standard code {
font-family: 'Courier Prime', monospace;
}

.page-konomi-standard .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-konomi-standard .reference-list {
margin-top: 1rem;
}

.page-konomi-standard .reference-list li {
margin-bottom: 0.8rem;
}

.page-konomi-standard .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-konomi-standard .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-konomi-standard .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-konomi-standard .closing-statement p + p {
margin-top: 1rem;
}

.page-konomi-standard .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-konomi-standard .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-konomi-standard .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-konomi-standard .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-konomi-standard .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-konomi-standard .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-konomi-standard .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-konomi-standard .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-konomi-standard .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-konomi-standard .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-konomi-standard .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-konomi-standard footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-konomi-standard footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-konomi-standard footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-konomi-standard footer a:hover {
color: var(--color-bronze);
}

.page-konomi-standard .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-konomi-standard .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-konomi-standard header {
padding: 3rem 1.5rem 2rem;
    }

    .page-konomi-standard .article-shell,
    .page-konomi-standard .cta-section {
padding: 2rem 1.5rem;
    }

    .page-konomi-standard .lead,
    .page-konomi-standard .callout,
    .page-konomi-standard .closing-statement {
padding: 1.5rem;
    }

    .page-konomi-standard .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-konomi-standard .btn {
width: 100%;
                max-width: 320px;
    }
}

/* lightning-factory.html */
.page-lightning-factory {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-lightning-factory,
.page-lightning-factory * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-lightning-factory {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-lightning-factory::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-lightning-factory header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-lightning-factory header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-lightning-factory .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-lightning-factory .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-lightning-factory .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-lightning-factory h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-lightning-factory .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-lightning-factory .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-lightning-factory .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-lightning-factory .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-lightning-factory .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-lightning-factory .back-link a:hover {
color: var(--color-rust);
}

.page-lightning-factory .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-lightning-factory .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-lightning-factory .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-lightning-factory .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-lightning-factory .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-lightning-factory .lead,
.page-lightning-factory .callout,
.page-lightning-factory .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-lightning-factory .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
}

.page-lightning-factory .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-lightning-factory .lead p + p,
.page-lightning-factory .callout p + p {
margin-top: 1rem;
}

.page-lightning-factory .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-lightning-factory .section {
margin-bottom: 4rem;
}

.page-lightning-factory .section:last-of-type {
margin-bottom: 0;
}

.page-lightning-factory .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-lightning-factory .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-lightning-factory .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-lightning-factory .section h4 {
font-size: 1.1rem;
            letter-spacing: 0.03em;
            color: var(--color-graphite);
            margin: 1.25rem 0 0.6rem;
}

.page-lightning-factory .section p,
.page-lightning-factory .section li,
.page-lightning-factory .callout p {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-lightning-factory .section p + p {
margin-top: 1rem;
}

.page-lightning-factory .section ul,
.page-lightning-factory .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-lightning-factory .section li + li {
margin-top: 0.65rem;
}

.page-lightning-factory strong {
color: var(--color-rust);
}

.page-lightning-factory pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-lightning-factory code {
font-family: 'Courier Prime', monospace;
}

.page-lightning-factory .table-wrap {
margin: 1.5rem 0;
            overflow-x: auto;
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-lightning-factory table {
width: 100%;
            border-collapse: collapse;
            min-width: 620px;
            background: white;
}

.page-lightning-factory th,
.page-lightning-factory td {
padding: 0.95rem 1rem;
            text-align: left;
            border: 1px solid rgba(166, 124, 82, 0.18);
            vertical-align: top;
}

.page-lightning-factory th {
background: var(--color-graphite);
            color: var(--color-parchment);
            font-weight: 600;
}

.page-lightning-factory tbody tr:nth-child(even) {
background: rgba(245, 241, 232, 0.55);
}

.page-lightning-factory .reference-list {
margin-top: 1rem;
}

.page-lightning-factory .reference-list li {
margin-bottom: 0.8rem;
}

.page-lightning-factory .reference-list a {
color: var(--color-rust);
}

.page-lightning-factory .reference-list a:hover {
color: var(--color-graphite);
}

.page-lightning-factory .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-lightning-factory .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-lightning-factory .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-lightning-factory .closing-statement p + p {
margin-top: 1rem;
}

.page-lightning-factory .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-lightning-factory .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-lightning-factory .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-lightning-factory .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-lightning-factory .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-lightning-factory .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-lightning-factory .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-lightning-factory .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-lightning-factory .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-lightning-factory .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-lightning-factory .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-lightning-factory footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-lightning-factory footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-lightning-factory footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-lightning-factory footer a:hover {
color: var(--color-bronze);
}

.page-lightning-factory .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-lightning-factory .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-lightning-factory header {
padding: 3rem 1.5rem 2rem;
    }

    .page-lightning-factory .article-shell,
    .page-lightning-factory .cta-section {
padding: 2rem 1.5rem;
    }

    .page-lightning-factory .lead,
    .page-lightning-factory .callout,
    .page-lightning-factory .closing-statement {
padding: 1.5rem;
    }

    .page-lightning-factory .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-lightning-factory .btn {
width: 100%;
                max-width: 320px;
    }
}

/* members.html */
.page-members {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-accent: #356B6A;
}

.page-members,
.page-members * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-members {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-members::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-members header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-members header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 50%, var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-members .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-members .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-members h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.08;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-members .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-members .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-members .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-members .back-link a:hover {
color: var(--color-rust);
}

.page-members .container {
max-width: 1120px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-members .intro-panel,
.page-members .members-shell,
.page-members .future-panel,
.page-members .cta-section {
background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-members .intro-panel {
margin: 5rem auto 2.5rem;
            padding: 3rem;
            border-left: 6px solid var(--color-accent);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-members .members-shell,
.page-members .future-panel,
.page-members .cta-section {
padding: 3rem;
            opacity: 0;
            animation: fadeInScale 1s ease-out 1.15s forwards;
}

.page-members .future-panel,
.page-members .cta-section {
margin-top: 2.5rem;
}

.page-members .intro-panel p,
.page-members .member-card p,
.page-members .future-panel p,
.page-members .cta-section p {
font-size: 1.1rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-members .intro-panel p + p,
.page-members .member-body p + p,
.page-members .future-panel p + p {
margin-top: 1rem;
}

.page-members .section-heading {
text-align: center;
            margin-bottom: 2.5rem;
}

.page-members .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-accent);
            margin-bottom: 0.8rem;
            position: relative;
            display: inline-block;
}

.page-members .section-heading h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-members .section-heading p {
color: var(--color-graphite);
            font-size: 1.05rem;
}

.page-members .member-card {
padding: 2rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.9) 0%, white 100%);
            border-top: 4px solid var(--color-accent);
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-members .member-card + .member-card {
margin-top: 2rem;
}

.page-members .member-meta {
display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            color: var(--color-graphite);
            font-size: 0.95rem;
}

.page-members .member-meta span {
padding: 0.35rem 0.65rem;
            background: rgba(53, 107, 106, 0.12);
}

.page-members .member-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            line-height: 1.2;
            color: var(--color-ink);
            margin-bottom: 0.6rem;
}

.page-members .member-card h3 a {
color: inherit;
            text-decoration: none;
            transition: color 0.3s ease;
}

.page-members .member-card h3 a:hover {
color: var(--color-accent);
}

.page-members .member-role {
font-size: 1.08rem;
            color: var(--color-accent);
            font-weight: 600;
            margin-bottom: 1.25rem;
}

.page-members .profile-layout {
display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 2rem;
            align-items: start;
}

.page-members .member-photo {
background: var(--color-highlight);
            padding: 0.85rem;
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-members .member-photo img {
display: block;
            width: 100%;
            height: auto;
}

.page-members .member-summary {
font-size: 1.08rem;
            color: var(--color-ink);
            font-weight: 600;
            margin-bottom: 1.1rem;
}

.page-members .member-tags {
display: flex;
            gap: 0.65rem;
            flex-wrap: wrap;
            margin: 1.25rem 0 1.35rem;
}

.page-members .member-tags span {
padding: 0.42rem 0.7rem;
            background: rgba(166, 124, 82, 0.14);
            color: var(--color-ink);
            font-size: 0.92rem;
            font-weight: 600;
            letter-spacing: 0.02em;
}

.page-members .member-actions {
display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
}

.page-members .member-actions .btn {
padding: 0.85rem 1.25rem;
}

.page-members .member-body strong {
color: var(--color-accent);
}

.page-members .member-body ul {
margin: 1rem 0 0 1.5rem;
            color: var(--color-graphite);
}

.page-members .member-body li {
font-size: 1.06rem;
            line-height: 1.75;
}

.page-members .member-body li + li {
margin-top: 0.45rem;
}

.page-members .member-contact {
margin-top: 1.5rem;
            font-weight: 600;
}

.page-members .member-contact a {
color: var(--color-rust);
            text-decoration: none;
}

.page-members .member-contact a:hover {
color: var(--color-accent);
}

.page-members .member-signoff {
margin-top: 1.5rem;
            color: var(--color-accent);
            font-style: italic;
            font-weight: 600;
}

.page-members .future-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
            margin-top: 1.5rem;
}

.page-members .future-slot {
padding: 1.35rem;
            border: 1px dashed rgba(53, 107, 106, 0.45);
            background: var(--color-highlight);
}

.page-members .future-slot h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            color: var(--color-ink);
            margin-bottom: 0.5rem;
}

.page-members .cta-section {
text-align: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
}

.page-members .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-members .cta-section h2,
.page-members .cta-section p,
.page-members .cta-buttons {
position: relative;
            z-index: 1;
}

.page-members .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
}

.page-members .cta-section p {
color: var(--color-bronze);
            margin-bottom: 2rem;
}

.page-members .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
}

.page-members .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
}

.page-members .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-members .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.35);
}

.page-members .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-members .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.3);
}

.page-members footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-members footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-members footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-members footer a:hover {
color: var(--color-bronze);
}

.page-members .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-members .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 860px) {
    .page-members .profile-layout {
grid-template-columns: 1fr;
    }

    .page-members .member-photo {
max-width: 320px;
    }
}

@media (max-width: 768px) {
    .page-members header {
padding: 3rem 1.5rem 2rem;
    }

    .page-members .intro-panel,
    .page-members .members-shell,
    .page-members .future-panel,
    .page-members .cta-section {
padding: 2rem 1.5rem;
    }

    .page-members .cta-buttons {
flex-direction: column;
    }

    .page-members .btn {
width: 100%;
                text-align: center;
    }
}

/* mission-statement.html */
.page-mission-statement {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.95);
            --color-shadow: rgba(25, 22, 20, 0.1);
}

.page-mission-statement,
.page-mission-statement * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-mission-statement {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.75;
            overflow-x: hidden;
}

.page-mission-statement::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-mission-statement header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-mission-statement header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-mission-statement .guild-mark,
.page-mission-statement h1,
.page-mission-statement .subtitle {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-mission-statement .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-mission-statement h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.8rem, 7vw, 5rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-mission-statement .subtitle {
max-width: 880px;
            margin: 0 auto;
            font-size: 1.15rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-mission-statement main {
position: relative;
            z-index: 1;
}

.page-mission-statement .container {
max-width: 980px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-mission-statement .intro-panel,
.page-mission-statement .section-shell,
.page-mission-statement .directive-shell,
.page-mission-statement .closing-shell,
.page-mission-statement .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-mission-statement .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
}

.page-mission-statement .section-shell,
.page-mission-statement .directive-shell,
.page-mission-statement .closing-shell,
.page-mission-statement .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-mission-statement .section-heading {
margin-bottom: 1.2rem;
}

.page-mission-statement .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-mission-statement .section-shell p + p,
.page-mission-statement .intro-panel p + p,
.page-mission-statement .closing-shell p + p {
margin-top: 1rem;
}

.page-mission-statement .directive-shell {
background: linear-gradient(135deg, rgba(43, 122, 120, 0.1), rgba(194, 142, 80, 0.1));
}

.page-mission-statement .directive-label {
font-family: 'Courier Prime', monospace;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--color-rust);
            font-size: 0.95rem;
            margin-bottom: 0.6rem;
}

.page-mission-statement .directive-shell h2 {
font-family: 'Playfair Display', serif;
            font-size: 2.3rem;
            line-height: 1.1;
            margin-bottom: 0.8rem;
}

.page-mission-statement .directive-shell p {
font-size: 1.2rem;
            font-weight: 600;
            max-width: 820px;
}

.page-mission-statement .closing-shell {
border-left: 4px solid var(--color-rust);
            background: var(--color-highlight);
}

.page-mission-statement .closing-shell p {
font-size: 1.08rem;
}

.page-mission-statement .cta-section {
text-align: center;
}

.page-mission-statement .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-mission-statement .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-mission-statement .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-mission-statement .btn:hover {
transform: translateY(-2px);
}

.page-mission-statement .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-mission-statement .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

@media (max-width: 768px) {
    .page-mission-statement header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-mission-statement .container {
padding: 0 1rem 3rem;
    }

    .page-mission-statement .intro-panel,
    .page-mission-statement .section-shell,
    .page-mission-statement .directive-shell,
    .page-mission-statement .closing-shell,
    .page-mission-statement .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-mission-statement .directive-shell p {
font-size: 1.08rem;
    }

    .page-mission-statement .cta-buttons {
flex-direction: column;
    }

    .page-mission-statement .btn {
width: 100%;
    }
}

/* occams-razor.html */
.page-occams-razor {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
            --color-knowledge: #3F6C8E;
}

.page-occams-razor,
.page-occams-razor * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-occams-razor {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.65;
            overflow-x: hidden;
}

.page-occams-razor::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-occams-razor header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-occams-razor header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-knowledge) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-occams-razor .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-occams-razor .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-occams-razor .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-occams-razor h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.6rem, 6.6vw, 4.9rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-occams-razor .subtitle {
font-size: clamp(1.02rem, 2.1vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 980px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-occams-razor .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-occams-razor .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-occams-razor .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-occams-razor .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-occams-razor .back-link a:hover {
color: var(--color-rust);
}

.page-occams-razor .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-occams-razor .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-occams-razor .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-occams-razor .article-nav a {
text-decoration: none;
            color: var(--color-knowledge);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(63, 108, 142, 0.25);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-occams-razor .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-occams-razor .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-knowledge);
            margin-bottom: 3rem;
            box-shadow: inset 0 1px 0 rgba(166, 124, 82, 0.15);
}

.page-occams-razor .lead p + p {
margin-top: 1rem;
}

.page-occams-razor .section {
margin-bottom: 3.5rem;
}

.page-occams-razor .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(1.85rem, 3.3vw, 2.5rem);
            margin-bottom: 1rem;
            color: var(--color-ink);
}

.page-occams-razor .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            margin: 1.4rem 0 0.7rem;
            color: var(--color-graphite);
}

.page-occams-razor .section p + p {
margin-top: 1rem;
}

.page-occams-razor .callout {
margin: 1.8rem 0;
            padding: 1.5rem 1.6rem;
            background: rgba(63, 108, 142, 0.08);
            border-left: 4px solid var(--color-knowledge);
}

.page-occams-razor .callout p + p {
margin-top: 0.75rem;
}

.page-occams-razor pre {
background: var(--color-graphite);
            color: #F7F3EE;
            padding: 1.4rem;
            overflow-x: auto;
            margin: 1.4rem 0;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.55;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page-occams-razor code {
font-family: 'Courier Prime', monospace;
}

.page-occams-razor .closing-statement {
margin: 2rem 0;
            padding: 1.8rem;
            background: linear-gradient(135deg, rgba(63, 108, 142, 0.08), rgba(200, 75, 49, 0.08));
            border: 1px solid rgba(166, 124, 82, 0.3);
}

.page-occams-razor .cta-section {
margin: 0 auto 5rem;
            text-align: center;
            padding: 2.5rem;
            background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-occams-razor .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.8rem;
}

.page-occams-razor .cta-buttons {
display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
}

.page-occams-razor .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.95rem 1.35rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.page-occams-razor .btn:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-occams-razor .btn-primary {
background: var(--color-knowledge);
            color: white;
}

.page-occams-razor .btn-secondary {
background: var(--color-highlight);
            color: var(--color-ink);
            border: 1px solid rgba(166, 124, 82, 0.35);
}

.page-occams-razor footer {
position: relative;
            z-index: 1;
            padding: 3rem 2rem 4rem;
            text-align: center;
            color: var(--color-graphite);
}

.page-occams-razor .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            color: var(--color-knowledge);
            text-decoration: none;
            font-weight: 600;
}

.page-occams-razor .github-link:hover {
color: var(--color-rust);
}

@media (max-width: 820px) {
    .page-occams-razor header {
padding: 3rem 1.25rem 2.5rem;
    }

    .page-occams-razor .container {
padding: 0 1rem;
    }

    .page-occams-razor .article-shell {
margin: 3rem auto;
                padding: 2.2rem 1.35rem;
    }

    .page-occams-razor .lead,
    .page-occams-razor .callout,
    .page-occams-razor .cta-section {
padding: 1.5rem;
    }

    .page-occams-razor pre {
font-size: 0.87rem;
                padding: 1rem;
    }
}

/* question-reflection-action.html */
.page-question-reflection-action {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-question-reflection-action,
.page-question-reflection-action * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-question-reflection-action {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-question-reflection-action::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-question-reflection-action header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-question-reflection-action header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-question-reflection-action .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-question-reflection-action .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-question-reflection-action .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-question-reflection-action h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 6.4vw, 4.7rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-question-reflection-action .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-question-reflection-action .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-question-reflection-action .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-question-reflection-action .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-question-reflection-action .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-question-reflection-action .back-link a:hover {
color: var(--color-rust);
}

.page-question-reflection-action .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-question-reflection-action .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-question-reflection-action .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-question-reflection-action .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-question-reflection-action .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-question-reflection-action .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
}

.page-question-reflection-action .lead p {
font-size: 1.15rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-question-reflection-action .section {
margin-bottom: 4rem;
}

.page-question-reflection-action .section:last-of-type {
margin-bottom: 0;
}

.page-question-reflection-action .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-question-reflection-action .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-question-reflection-action .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-question-reflection-action .section h4 {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            color: var(--color-rust);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin: 1.5rem 0 0.6rem;
}

.page-question-reflection-action .section p,
.page-question-reflection-action .section li {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-question-reflection-action .section p + p {
margin-top: 1rem;
}

.page-question-reflection-action .section ul,
.page-question-reflection-action .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-question-reflection-action .section li + li {
margin-top: 0.65rem;
}

.page-question-reflection-action .section a {
color: var(--color-rust);
            text-decoration: none;
            word-break: break-word;
}

.page-question-reflection-action .section a:hover {
color: var(--color-ink);
}

.page-question-reflection-action strong {
color: var(--color-rust);
}

.page-question-reflection-action em {
font-style: italic;
}

.page-question-reflection-action .media-shell,
.page-question-reflection-action .callout,
.page-question-reflection-action .closing-statement {
margin: 1.8rem 0;
            padding: 1.8rem 1.9rem;
}

.page-question-reflection-action .media-shell,
.page-question-reflection-action .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-question-reflection-action .media-shell video {
display: block;
            width: 100%;
            height: auto;
            margin-top: 1rem;
            background: #000;
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-question-reflection-action .media-shell figcaption {
margin-top: 0.85rem;
            font-size: 0.95rem;
            color: var(--color-graphite);
}

.page-question-reflection-action .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-question-reflection-action .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-question-reflection-action .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-question-reflection-action .closing-statement p + p {
margin-top: 1rem;
}

.page-question-reflection-action .reference-list {
margin-top: 1rem;
}

.page-question-reflection-action .reference-list li {
margin-bottom: 0.8rem;
}

.page-question-reflection-action .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-question-reflection-action .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-question-reflection-action .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-question-reflection-action .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-question-reflection-action .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-question-reflection-action .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-question-reflection-action .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-question-reflection-action .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-question-reflection-action .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-question-reflection-action .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-question-reflection-action .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-question-reflection-action footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-question-reflection-action footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-question-reflection-action footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-question-reflection-action footer a:hover {
color: var(--color-bronze);
}

.page-question-reflection-action .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-question-reflection-action .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-question-reflection-action header {
padding: 3rem 1.5rem 2rem;
    }

    .page-question-reflection-action .article-shell,
    .page-question-reflection-action .cta-section {
padding: 2rem 1.5rem;
    }

    .page-question-reflection-action .lead,
    .page-question-reflection-action .media-shell,
    .page-question-reflection-action .callout,
    .page-question-reflection-action .closing-statement {
padding: 1.5rem;
    }

    .page-question-reflection-action .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-question-reflection-action .btn {
width: 100%;
                max-width: 320px;
    }
}

/* sad.html */
.page-sad {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-sad,
.page-sad * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-sad {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-sad::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-sad header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-sad header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-sad .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-sad .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-sad .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-sad h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.6rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-sad .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-sad .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-sad .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-sad .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-sad .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-sad .back-link a:hover {
color: var(--color-rust);
}

.page-sad .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-sad .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-sad .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-sad .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-sad .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-sad .lead,
.page-sad .callout,
.page-sad .closing-statement {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-sad .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
}

.page-sad .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-sad .lead p + p {
margin-top: 1rem;
}

.page-sad .section {
margin-bottom: 4rem;
}

.page-sad .section:last-of-type {
margin-bottom: 0;
}

.page-sad .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-sad .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-sad .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-sad .section p,
.page-sad .section li {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-sad .section p + p {
margin-top: 1rem;
}

.page-sad .section ul,
.page-sad .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-sad .section li + li {
margin-top: 0.65rem;
}

.page-sad strong {
color: var(--color-rust);
}

.page-sad pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-sad code {
font-family: 'Courier Prime', monospace;
}

.page-sad .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-sad .reference-list {
margin-top: 1rem;
}

.page-sad .reference-list li {
margin-bottom: 0.8rem;
}

.page-sad .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-sad .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-sad .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-sad .closing-statement p + p {
margin-top: 1rem;
}

.page-sad .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-sad .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-sad .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-sad .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-sad .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-sad .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-sad .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-sad .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-sad .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-sad .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-sad .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-sad footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-sad footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-sad footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-sad footer a:hover {
color: var(--color-bronze);
}

.page-sad .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-sad .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-sad header {
padding: 3rem 1.5rem 2rem;
    }

    .page-sad .article-shell,
    .page-sad .cta-section {
padding: 2rem 1.5rem;
    }

    .page-sad .lead,
    .page-sad .callout,
    .page-sad .closing-statement {
padding: 1.5rem;
    }

    .page-sad .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-sad .btn {
width: 100%;
                max-width: 320px;
    }
}

/* showcases.html */
.page-showcases {
--color-parchment: #F5F1E8;
            --color-ink: #191614;
            --color-graphite: #222A2F;
            --color-accent: #2B7A78;
            --color-bronze: #C28E50;
            --color-rust: #C84B31;
            --color-highlight: #FFF6E6;
            --color-card: rgba(255, 255, 255, 0.94);
            --color-shadow: rgba(25, 22, 20, 0.1);
            --color-code-bg: #11161B;
            --color-code-border: rgba(43, 122, 120, 0.25);
}

.page-showcases,
.page-showcases * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-showcases {
font-family: 'Work Sans', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(43, 122, 120, 0.08), transparent 28%),
                radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 24%),
                var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.7;
            overflow-x: hidden;
}

.page-showcases::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(25, 22, 20, 0.02) 2px, rgba(25, 22, 20, 0.02) 4px);
            background-size: 42px 42px;
            opacity: 0;
            animation: fadeInPattern 1.8s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-showcases header {
position: relative;
            padding: 4rem 2rem 3rem;
            background:
                linear-gradient(135deg, rgba(34, 42, 47, 0.96) 0%, rgba(25, 22, 20, 0.98) 100%);
            overflow: hidden;
}

.page-showcases header::after {
content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-bronze) 52%, var(--color-rust) 100%);
}

.page-showcases .guild-mark,
.page-showcases .subtitle,
.page-showcases h1 {
position: relative;
            z-index: 1;
            text-align: center;
}

.page-showcases .guild-mark {
margin-bottom: 1rem;
            font-family: 'Courier Prime', monospace;
            font-size: 2.9rem;
            font-weight: 700;
            color: var(--color-bronze);
            text-shadow: 0 2px 20px rgba(194, 142, 80, 0.24);
}

.page-showcases h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.8rem, 7vw, 5rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--color-parchment);
            margin-bottom: 0.9rem;
}

.page-showcases .subtitle {
max-width: 860px;
            margin: 0 auto;
            font-size: 1.15rem;
            color: rgba(245, 241, 232, 0.88);
}

.page-showcases main {
position: relative;
            z-index: 1;
}

.page-showcases .container {
max-width: 1180px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
}

.page-showcases .intro-panel,
.page-showcases .showcase-shell,
.page-showcases .section-shell,
.page-showcases .cta-section {
background: var(--color-card);
            border: 1px solid rgba(43, 122, 120, 0.08);
            box-shadow: 0 10px 30px var(--color-shadow);
}

.page-showcases .intro-panel {
margin-top: -2.25rem;
            padding: 2rem;
}

.page-showcases .intro-panel p + p,
.page-showcases .section-shell p + p,
.page-showcases .showcase-body p + p {
margin-top: 1rem;
}

.page-showcases .showcase-shell {
margin-top: 2rem;
            overflow: hidden;
}

.page-showcases .showcase-hero {
padding: 2.5rem 2.25rem 2rem;
            background:
                linear-gradient(135deg, rgba(43, 122, 120, 0.12) 0%, rgba(194, 142, 80, 0.15) 54%, rgba(200, 75, 49, 0.13) 100%);
            border-bottom: 1px solid rgba(25, 22, 20, 0.08);
}

.page-showcases .badge-row {
display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.1rem;
}

.page-showcases .badge {
display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 0.85rem;
            background: rgba(25, 22, 20, 0.08);
            color: var(--color-graphite);
            font-family: 'Courier Prime', monospace;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
}

.page-showcases .showcase-hero h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.1rem, 4vw, 3.45rem);
            line-height: 1.08;
            letter-spacing: -0.02em;
            margin-bottom: 0.7rem;
}

.page-showcases .showcase-kicker {
font-size: 1.18rem;
            max-width: 900px;
            color: var(--color-graphite);
}

.page-showcases .summary-grid,
.page-showcases .three-up,
.page-showcases .two-up {
display: grid;
            gap: 1.2rem;
}

.page-showcases .summary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-top: 1.6rem;
}

.page-showcases .summary-card {
padding: 1.2rem;
            background: rgba(255, 255, 255, 0.68);
            border-left: 4px solid var(--color-accent);
}

.page-showcases .summary-card strong {
display: block;
            margin-bottom: 0.35rem;
            font-family: 'Courier Prime', monospace;
            color: var(--color-rust);
            text-transform: uppercase;
            font-size: 0.88rem;
            letter-spacing: 0.03em;
}

.page-showcases .showcase-body {
padding: 2rem 2.25rem 2.4rem;
}

.page-showcases .section-shell {
margin-top: 2rem;
            padding: 2rem 2.1rem;
}

.page-showcases .section-heading {
margin-bottom: 1.2rem;
}

.page-showcases .section-heading h3 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            line-height: 1.12;
            margin-bottom: 0.35rem;
}

.page-showcases .section-heading p {
color: var(--color-graphite);
}

.page-showcases .two-up {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-showcases .three-up {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-showcases .panel {
padding: 1.25rem;
            background: rgba(245, 241, 232, 0.9);
            border-top: 3px solid var(--color-bronze);
}

.page-showcases .panel h4 {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--color-rust);
            margin-bottom: 0.55rem;
}

.page-showcases pre {
margin-top: 1rem;
            padding: 1.25rem 1.3rem;
            background: var(--color-code-bg);
            color: #F6F2E9;
            border: 1px solid var(--color-code-border);
            overflow-x: auto;
            box-shadow: inset 0 0 0 1px rgba(194, 142, 80, 0.1);
}

.page-showcases code,
.page-showcases pre {
font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.65;
}

.page-showcases .callout {
margin-top: 1.25rem;
            padding: 1rem 1.15rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-rust);
}

.page-showcases .ritual-lines {
margin-top: 1.25rem;
            padding: 1.4rem 1.2rem;
            background: linear-gradient(135deg, rgba(43, 122, 120, 0.08), rgba(194, 142, 80, 0.1));
            font-family: 'Courier Prime', monospace;
            font-size: 0.98rem;
            text-align: center;
            white-space: pre-line;
}

.page-showcases .cta-section {
margin-top: 2rem;
            padding: 2rem 2.1rem;
            text-align: center;
}

.page-showcases .cta-section h3 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.6rem;
}

.page-showcases .cta-buttons {
display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.4rem;
}

.page-showcases .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.85rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-showcases .btn:hover {
transform: translateY(-2px);
}

.page-showcases .btn-primary {
background: var(--color-graphite);
            color: var(--color-parchment);
            box-shadow: 0 12px 22px rgba(34, 42, 47, 0.18);
}

.page-showcases .btn-secondary {
background: white;
            color: var(--color-graphite);
            border: 1px solid rgba(25, 22, 20, 0.12);
}

.page-showcases a {
color: var(--color-accent);
}

@media (max-width: 900px) {
    .page-showcases .summary-grid,
    .page-showcases .three-up,
    .page-showcases .two-up {
grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-showcases header {
padding: 3rem 1.5rem 2.5rem;
    }

    .page-showcases .container {
padding: 0 1rem 3rem;
    }

    .page-showcases .intro-panel,
    .page-showcases .showcase-hero,
    .page-showcases .showcase-body,
    .page-showcases .section-shell,
    .page-showcases .cta-section {
padding-left: 1.35rem;
                padding-right: 1.35rem;
    }

    .page-showcases .cta-buttons {
flex-direction: column;
    }

    .page-showcases .btn {
width: 100%;
    }
}

/* the-dog-the-data-scientist-and-the-mrna-vaccine.html */
.page-the-dog-the-data-scientist-and-the-mrna-vaccine {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 6vw, 4.6rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .subtitle {
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 980px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .back-link a:hover {
color: var(--color-rust);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .lead h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--color-ink);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .lead p + p,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section p + p,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section p + ul,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section p + ol,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section ul + p,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section ol + p,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .quote-block + p {
margin-top: 1rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section {
margin-bottom: 3rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--color-ink);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            margin: 1.6rem 0 0.7rem;
            color: var(--color-rust);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section ul,
.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section ol {
padding-left: 1.4rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .section li + li {
margin-top: 0.45rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .quote-block {
margin: 1.5rem 0;
            padding: 1.4rem 1.5rem;
            background: var(--color-highlight);
            border-left: 4px solid var(--color-bronze);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .quote-block blockquote {
font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            line-height: 1.5;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .quote-block p {
margin-top: 0.8rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .callout {
margin-bottom: 2rem;
            padding: 1.2rem 1.4rem;
            background: rgba(200, 75, 49, 0.08);
            border: 1px solid rgba(200, 75, 49, 0.18);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .closing-statement {
margin-top: 4rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(26, 22, 20, 0.12);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .closing-statement p + p {
margin-top: 1rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .paper-mark {
font-family: 'Courier Prime', monospace;
            color: var(--color-rust);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .cta-section {
text-align: center;
            margin: 0 auto 5rem;
            padding: 3rem 2rem;
            background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.7rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .cta-buttons {
margin-top: 1.5rem;
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .btn {
display: inline-block;
            padding: 0.9rem 1.4rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .btn:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .btn-secondary {
background: var(--color-highlight);
            color: var(--color-ink);
            border: 1px solid rgba(166, 124, 82, 0.35);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine footer {
text-align: center;
            padding: 2rem;
            color: var(--color-graphite);
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine footer p + p {
margin-top: 0.35rem;
}

.page-the-dog-the-data-scientist-and-the-mrna-vaccine .github-link {
display: inline-block;
            margin-top: 0.8rem;
            color: var(--color-rust);
            text-decoration: none;
            font-weight: 600;
}

@media (max-width: 820px) {
    .page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-shell {
padding: 2rem 1.4rem;
                margin: 3rem auto;
    }
}

@media (max-width: 640px) {
    .page-the-dog-the-data-scientist-and-the-mrna-vaccine header {
padding: 3rem 1rem 2.5rem;
    }

    .page-the-dog-the-data-scientist-and-the-mrna-vaccine .container {
padding: 0 1rem;
    }

    .page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-nav {
gap: 0.6rem;
    }

    .page-the-dog-the-data-scientist-and-the-mrna-vaccine .article-nav a {
width: 100%;
                text-align: center;
    }

    .page-the-dog-the-data-scientist-and-the-mrna-vaccine .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-the-dog-the-data-scientist-and-the-mrna-vaccine .btn {
width: 100%;
                max-width: 320px;
    }
}

/* the-harm-equation.html */
.page-the-harm-equation {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-the-harm-equation,
.page-the-harm-equation * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-the-harm-equation {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-the-harm-equation::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-the-harm-equation header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-the-harm-equation header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-the-harm-equation .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-the-harm-equation .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-the-harm-equation .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-the-harm-equation h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-the-harm-equation .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-the-harm-equation .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-the-harm-equation .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-the-harm-equation .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-the-harm-equation .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-the-harm-equation .back-link a:hover {
color: var(--color-rust);
}

.page-the-harm-equation .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-the-harm-equation .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-the-harm-equation .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-the-harm-equation .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-the-harm-equation .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-harm-equation .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
}

.page-the-harm-equation .lead p {
font-size: 1.15rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-the-harm-equation .section {
margin-bottom: 4rem;
}

.page-the-harm-equation .section:last-of-type {
margin-bottom: 0;
}

.page-the-harm-equation .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-the-harm-equation .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-the-harm-equation .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-the-harm-equation .section p,
.page-the-harm-equation .section li,
.page-the-harm-equation .section td,
.page-the-harm-equation .section th {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-the-harm-equation .section p + p {
margin-top: 1rem;
}

.page-the-harm-equation .section ul {
margin: 1rem 0 0 1.5rem;
}

.page-the-harm-equation .section li + li {
margin-top: 0.65rem;
}

.page-the-harm-equation strong {
color: var(--color-rust);
}

.page-the-harm-equation .equation-block,
.page-the-harm-equation .callout,
.page-the-harm-equation .closing-statement {
margin: 1.8rem 0;
            padding: 1.8rem 1.9rem;
}

.page-the-harm-equation .equation-block {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 5px solid var(--color-rust);
}

.page-the-harm-equation .equation-block blockquote {
font-family: 'Playfair Display', serif;
            font-size: clamp(1.5rem, 3vw, 2.1rem);
            line-height: 1.35;
            color: var(--color-ink);
}

.page-the-harm-equation .equation-block p {
margin-top: 1rem;
}

.page-the-harm-equation .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-the-harm-equation .table-wrap {
overflow-x: auto;
            margin: 1.5rem 0;
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-the-harm-equation table {
width: 100%;
            min-width: 720px;
            border-collapse: collapse;
            background: white;
}

.page-the-harm-equation thead {
background: var(--color-graphite);
}

.page-the-harm-equation thead th {
color: var(--color-parchment);
            font-weight: 600;
}

.page-the-harm-equation th,
.page-the-harm-equation td {
padding: 1rem;
            text-align: left;
            vertical-align: top;
            border-bottom: 1px solid rgba(166, 124, 82, 0.2);
}

.page-the-harm-equation tbody tr:nth-child(even) {
background: rgba(245, 241, 232, 0.55);
}

.page-the-harm-equation .reference-list {
margin-top: 1rem;
}

.page-the-harm-equation .reference-list li {
margin-bottom: 0.6rem;
}

.page-the-harm-equation .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-the-harm-equation .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-the-harm-equation .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-the-harm-equation .closing-statement p + p {
margin-top: 1rem;
}

.page-the-harm-equation .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-the-harm-equation .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-the-harm-equation .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-the-harm-equation .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-the-harm-equation .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-the-harm-equation .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-the-harm-equation .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-the-harm-equation .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-the-harm-equation .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-the-harm-equation .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-the-harm-equation .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-the-harm-equation footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-the-harm-equation footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-the-harm-equation footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-the-harm-equation footer a:hover {
color: var(--color-bronze);
}

.page-the-harm-equation .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-the-harm-equation .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-the-harm-equation header {
padding: 3rem 1.5rem 2rem;
    }

    .page-the-harm-equation .article-shell,
    .page-the-harm-equation .cta-section {
padding: 2rem 1.5rem;
    }

    .page-the-harm-equation .lead,
    .page-the-harm-equation .equation-block,
    .page-the-harm-equation .callout,
    .page-the-harm-equation .closing-statement {
padding: 1.5rem;
    }

    .page-the-harm-equation .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-the-harm-equation .btn {
width: 100%;
                max-width: 320px;
    }
}

/* the-pattern-that-wasnt-there.html */
.page-the-pattern-that-wasnt-there {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-the-pattern-that-wasnt-there,
.page-the-pattern-that-wasnt-there * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-the-pattern-that-wasnt-there {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-the-pattern-that-wasnt-there::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-the-pattern-that-wasnt-there header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-the-pattern-that-wasnt-there header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-the-pattern-that-wasnt-there .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-the-pattern-that-wasnt-there .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-the-pattern-that-wasnt-there .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-the-pattern-that-wasnt-there h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.6rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-the-pattern-that-wasnt-there .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-the-pattern-that-wasnt-there .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-the-pattern-that-wasnt-there .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-the-pattern-that-wasnt-there .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-the-pattern-that-wasnt-there .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-the-pattern-that-wasnt-there .back-link a:hover {
color: var(--color-rust);
}

.page-the-pattern-that-wasnt-there .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-the-pattern-that-wasnt-there .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-the-pattern-that-wasnt-there .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-the-pattern-that-wasnt-there .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-the-pattern-that-wasnt-there .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-pattern-that-wasnt-there .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
}

.page-the-pattern-that-wasnt-there .lead p {
font-size: 1.15rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-the-pattern-that-wasnt-there .section {
margin-bottom: 4rem;
}

.page-the-pattern-that-wasnt-there .section:last-of-type {
margin-bottom: 0;
}

.page-the-pattern-that-wasnt-there .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-the-pattern-that-wasnt-there .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-the-pattern-that-wasnt-there .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-the-pattern-that-wasnt-there .section p,
.page-the-pattern-that-wasnt-there .section li {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-the-pattern-that-wasnt-there .section p + p {
margin-top: 1rem;
}

.page-the-pattern-that-wasnt-there .section ul,
.page-the-pattern-that-wasnt-there .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-the-pattern-that-wasnt-there .section li + li {
margin-top: 0.65rem;
}

.page-the-pattern-that-wasnt-there .section a {
color: var(--color-rust);
            text-decoration: none;
            word-break: break-word;
}

.page-the-pattern-that-wasnt-there .section a:hover {
color: var(--color-ink);
}

.page-the-pattern-that-wasnt-there strong {
color: var(--color-rust);
}

.page-the-pattern-that-wasnt-there em {
font-style: italic;
}

.page-the-pattern-that-wasnt-there .callout,
.page-the-pattern-that-wasnt-there .closing-statement {
margin: 1.8rem 0;
            padding: 1.8rem 1.9rem;
}

.page-the-pattern-that-wasnt-there .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-the-pattern-that-wasnt-there .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-the-pattern-that-wasnt-there .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-the-pattern-that-wasnt-there .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-the-pattern-that-wasnt-there .closing-statement p + p {
margin-top: 1rem;
}

.page-the-pattern-that-wasnt-there .reference-list {
margin-top: 1rem;
}

.page-the-pattern-that-wasnt-there .reference-list li {
margin-bottom: 0.8rem;
}

.page-the-pattern-that-wasnt-there .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-the-pattern-that-wasnt-there .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-the-pattern-that-wasnt-there .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-the-pattern-that-wasnt-there .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-the-pattern-that-wasnt-there .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-the-pattern-that-wasnt-there .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-the-pattern-that-wasnt-there .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-the-pattern-that-wasnt-there .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-the-pattern-that-wasnt-there .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-the-pattern-that-wasnt-there .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-the-pattern-that-wasnt-there .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-the-pattern-that-wasnt-there footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-the-pattern-that-wasnt-there footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-the-pattern-that-wasnt-there footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-the-pattern-that-wasnt-there footer a:hover {
color: var(--color-bronze);
}

.page-the-pattern-that-wasnt-there .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-the-pattern-that-wasnt-there .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-the-pattern-that-wasnt-there header {
padding: 3rem 1.5rem 2rem;
    }

    .page-the-pattern-that-wasnt-there .article-shell,
    .page-the-pattern-that-wasnt-there .cta-section {
padding: 2rem 1.5rem;
    }

    .page-the-pattern-that-wasnt-there .lead,
    .page-the-pattern-that-wasnt-there .callout,
    .page-the-pattern-that-wasnt-there .closing-statement {
padding: 1.5rem;
    }

    .page-the-pattern-that-wasnt-there .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-the-pattern-that-wasnt-there .btn {
width: 100%;
                max-width: 320px;
    }
}

/* the-prediction-trap.html */
.page-the-prediction-trap {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-the-prediction-trap,
.page-the-prediction-trap * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-the-prediction-trap {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-the-prediction-trap::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-the-prediction-trap header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-the-prediction-trap header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-the-prediction-trap .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-the-prediction-trap .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-the-prediction-trap .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-the-prediction-trap h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-the-prediction-trap .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 940px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-the-prediction-trap .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-the-prediction-trap .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-the-prediction-trap .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-the-prediction-trap .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-the-prediction-trap .back-link a:hover {
color: var(--color-rust);
}

.page-the-prediction-trap .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-the-prediction-trap .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-the-prediction-trap .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-the-prediction-trap .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-the-prediction-trap .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-prediction-trap .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
}

.page-the-prediction-trap .lead p {
font-size: 1.15rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-the-prediction-trap .section {
margin-bottom: 4rem;
}

.page-the-prediction-trap .section:last-of-type {
margin-bottom: 0;
}

.page-the-prediction-trap .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-the-prediction-trap .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-the-prediction-trap .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-the-prediction-trap .section p,
.page-the-prediction-trap .section li,
.page-the-prediction-trap .section td,
.page-the-prediction-trap .section th {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-the-prediction-trap .section p + p {
margin-top: 1rem;
}

.page-the-prediction-trap .section ul,
.page-the-prediction-trap .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-the-prediction-trap .section li + li {
margin-top: 0.65rem;
}

.page-the-prediction-trap .section a {
color: var(--color-rust);
            text-decoration: none;
            word-break: break-word;
}

.page-the-prediction-trap .section a:hover {
color: var(--color-ink);
}

.page-the-prediction-trap strong {
color: var(--color-rust);
}

.page-the-prediction-trap .equation-block,
.page-the-prediction-trap .callout,
.page-the-prediction-trap .closing-statement {
margin: 1.8rem 0;
            padding: 1.8rem 1.9rem;
}

.page-the-prediction-trap .equation-block {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 5px solid var(--color-rust);
}

.page-the-prediction-trap .equation-block blockquote {
font-family: 'Playfair Display', serif;
            font-size: clamp(1.35rem, 2.8vw, 2rem);
            line-height: 1.45;
            color: var(--color-ink);
}

.page-the-prediction-trap .equation-block p {
margin-top: 1rem;
}

.page-the-prediction-trap .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-the-prediction-trap .table-wrap {
overflow-x: auto;
            margin: 1.5rem 0;
            box-shadow: 0 4px 10px var(--color-shadow);
}

.page-the-prediction-trap table {
width: 100%;
            min-width: 720px;
            border-collapse: collapse;
            background: white;
}

.page-the-prediction-trap thead {
background: var(--color-graphite);
}

.page-the-prediction-trap thead th {
color: var(--color-parchment);
            font-weight: 600;
}

.page-florence-governance-paper .section thead th {
color: var(--color-parchment);
}

.page-burnt-toast-scraping-analysis .section thead th {
color: var(--color-parchment);
}

.page-the-prediction-trap th,
.page-the-prediction-trap td {
padding: 1rem;
            text-align: left;
            vertical-align: top;
            border-bottom: 1px solid rgba(166, 124, 82, 0.2);
}

.page-the-prediction-trap tbody tr:nth-child(even) {
background: rgba(245, 241, 232, 0.55);
}

.page-the-prediction-trap .reference-list {
margin-top: 1rem;
}

.page-the-prediction-trap .reference-list li {
margin-bottom: 0.8rem;
}

.page-the-prediction-trap .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-the-prediction-trap .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-the-prediction-trap .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-the-prediction-trap .closing-statement p + p {
margin-top: 1rem;
}

.page-the-prediction-trap .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-the-prediction-trap .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-the-prediction-trap .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-the-prediction-trap .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-the-prediction-trap .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-the-prediction-trap .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-the-prediction-trap .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-the-prediction-trap .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-the-prediction-trap .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-the-prediction-trap .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-the-prediction-trap .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-the-prediction-trap footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-the-prediction-trap footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-the-prediction-trap footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-the-prediction-trap footer a:hover {
color: var(--color-bronze);
}

.page-the-prediction-trap .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-the-prediction-trap .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-the-prediction-trap header {
padding: 3rem 1.5rem 2rem;
    }

    .page-the-prediction-trap .article-shell,
    .page-the-prediction-trap .cta-section {
padding: 2rem 1.5rem;
    }

    .page-the-prediction-trap .lead,
    .page-the-prediction-trap .equation-block,
    .page-the-prediction-trap .callout,
    .page-the-prediction-trap .closing-statement {
padding: 1.5rem;
    }

    .page-the-prediction-trap .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-the-prediction-trap .btn {
width: 100%;
                max-width: 320px;
    }
}

/* the-rational-empire.html */
.page-the-rational-empire {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-the-rational-empire,
.page-the-rational-empire * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-the-rational-empire {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.65;
            overflow-x: hidden;
}

.page-the-rational-empire::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-the-rational-empire header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-the-rational-empire header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-the-rational-empire .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-the-rational-empire .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-the-rational-empire .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-the-rational-empire h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.4rem, 6.3vw, 4.75rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-the-rational-empire .subtitle {
font-size: clamp(1.02rem, 2.2vw, 1.28rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 980px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-the-rational-empire .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-the-rational-empire .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-the-rational-empire .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-the-rational-empire .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-the-rational-empire .back-link a:hover {
color: var(--color-rust);
}

.page-the-rational-empire .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-the-rational-empire .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-the-rational-empire .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-the-rational-empire .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-the-rational-empire .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-rational-empire .lead {
padding: 2.2rem;
            background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
            margin-bottom: 3rem;
            box-shadow: inset 0 1px 0 rgba(166, 124, 82, 0.15);
}

.page-the-rational-empire .lead p + p {
margin-top: 1rem;
}

.page-the-rational-empire .section {
margin-bottom: 3.5rem;
}

.page-the-rational-empire .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(1.85rem, 3.3vw, 2.5rem);
            margin-bottom: 1rem;
            color: var(--color-ink);
}

.page-the-rational-empire .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            margin: 1.4rem 0 0.7rem;
            color: var(--color-graphite);
}

.page-the-rational-empire .section p + p {
margin-top: 1rem;
}

.page-the-rational-empire .callout {
margin: 1.8rem 0;
            padding: 1.5rem 1.6rem;
            background: rgba(200, 75, 49, 0.08);
            border-left: 4px solid var(--color-rust);
}

.page-the-rational-empire .callout p + p {
margin-top: 0.75rem;
}

.page-the-rational-empire pre {
background: var(--color-graphite);
            color: #F7F3EE;
            padding: 1.4rem;
            overflow-x: auto;
            margin: 1.4rem 0;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.55;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            white-space: pre-wrap;
}

.page-the-rational-empire code {
font-family: 'Courier Prime', monospace;
}

.page-the-rational-empire .closing-statement {
margin: 2rem 0;
            padding: 1.8rem;
            background: linear-gradient(135deg, rgba(200, 75, 49, 0.08), rgba(166, 124, 82, 0.08));
            border: 1px solid rgba(166, 124, 82, 0.3);
}

.page-the-rational-empire .cta-section {
margin: 0 auto 5rem;
            text-align: center;
            padding: 2.5rem;
            background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-the-rational-empire .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: 2rem;
            margin-bottom: 0.8rem;
}

.page-the-rational-empire .cta-buttons {
display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
}

.page-the-rational-empire .btn {
display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.95rem 1.35rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.page-the-rational-empire .btn:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-the-rational-empire .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-the-rational-empire .btn-secondary {
background: var(--color-highlight);
            color: var(--color-ink);
            border: 1px solid rgba(166, 124, 82, 0.35);
}

.page-the-rational-empire footer {
position: relative;
            z-index: 1;
            padding: 3rem 2rem 4rem;
            text-align: center;
            color: var(--color-graphite);
}

.page-the-rational-empire .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            color: var(--color-rust);
            text-decoration: none;
            font-weight: 600;
}

.page-the-rational-empire .github-link:hover {
color: var(--color-bronze);
}

@media (max-width: 820px) {
    .page-the-rational-empire header {
padding: 3rem 1.25rem 2.5rem;
    }

    .page-the-rational-empire .container {
padding: 0 1rem;
    }

    .page-the-rational-empire .article-shell {
margin: 3rem auto;
                padding: 2.2rem 1.35rem;
    }

    .page-the-rational-empire .lead,
    .page-the-rational-empire .callout,
    .page-the-rational-empire .cta-section {
padding: 1.5rem;
    }

    .page-the-rational-empire pre {
font-size: 0.87rem;
                padding: 1rem;
    }
}

/* white-papers.html */
.page-white-papers {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-white-papers,
.page-white-papers * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-white-papers {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-white-papers::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-white-papers header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-white-papers header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-white-papers .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-white-papers .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-white-papers h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.08;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-white-papers .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 900px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-white-papers .back-link {
text-align: center;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.9s forwards;
}

.page-white-papers .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-white-papers .back-link a:hover {
color: var(--color-rust);
}

.page-white-papers .container {
max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-white-papers .intro-panel,
.page-white-papers .papers-shell,
.page-white-papers .future-panel {
background: white;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
}

.page-white-papers .intro-panel {
margin: 5rem auto 2.5rem;
            padding: 3rem;
            border-left: 6px solid var(--color-rust);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-white-papers .papers-shell,
.page-white-papers .future-panel {
padding: 3rem;
            opacity: 0;
            animation: fadeInScale 1s ease-out 1.15s forwards;
}

.page-white-papers .future-panel {
margin-top: 2.5rem;
}

.page-white-papers .intro-panel p,
.page-white-papers .paper-card p,
.page-white-papers .future-panel p {
font-size: 1.1rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-white-papers .intro-panel p + p,
.page-white-papers .future-panel p + p {
margin-top: 1rem;
}

.page-white-papers .section-heading {
text-align: center;
            margin-bottom: 2.5rem;
}

.page-white-papers .section-heading h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 0.8rem;
            position: relative;
            display: inline-block;
}

.page-white-papers .section-heading h2::after {
content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--color-bronze);
}

.page-white-papers .section-heading p {
color: var(--color-graphite);
            font-size: 1.05rem;
}

.page-white-papers .papers-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
}

.page-white-papers .paper-card {
padding: 2rem;
            background: linear-gradient(180deg, rgba(245, 241, 232, 0.9) 0%, white 100%);
            border-top: 4px solid var(--color-rust);
            box-shadow: 0 4px 10px var(--color-shadow);
            transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.page-white-papers .paper-card.position-paper {
border-top-color: var(--color-bronze);
}

.page-white-papers .paper-card.experimental-paper {
border-top-color: var(--color-graphite);
}

.page-white-papers .paper-card.research-note {
border-top-color: #6B5CA5;
}

.page-white-papers .paper-card.knowledge-paper {
border-top-color: #3F6C8E;
}

.page-white-papers .paper-card:hover {
transform: translateY(-6px);
            box-shadow:
                0 10px 18px var(--color-shadow),
                0 18px 28px var(--color-shadow);
}

.page-white-papers .paper-type {
display: inline-block;
            margin-bottom: 1rem;
            padding: 0.4rem 0.75rem;
            background: var(--color-rust);
            color: white;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
}

.page-white-papers .paper-card.position-paper .paper-type {
background: var(--color-bronze);
            color: var(--color-ink);
}

.page-white-papers .paper-card.experimental-paper .paper-type {
background: var(--color-graphite);
            color: var(--color-parchment);
}

.page-white-papers .paper-card.research-note .paper-type {
background: #6B5CA5;
            color: var(--color-parchment);
}

.page-white-papers .paper-card.knowledge-paper .paper-type {
background: #3F6C8E;
            color: var(--color-parchment);
}

.page-white-papers .paper-meta {
display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            color: var(--color-graphite);
            font-size: 0.95rem;
}

.page-white-papers .paper-meta span {
padding: 0.35rem 0.65rem;
            background: rgba(166, 124, 82, 0.14);
}

.page-white-papers .paper-card h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.7rem;
            line-height: 1.25;
            color: var(--color-ink);
            margin-bottom: 1rem;
}

.page-white-papers .paper-card strong {
color: var(--color-rust);
}

.page-white-papers .paper-actions {
display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
}

.page-white-papers .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 0.95rem 1.75rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
}

.page-white-papers .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-white-papers .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.35);
}

.page-white-papers .future-grid {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
            margin-top: 1.5rem;
}

.page-white-papers .future-slot {
padding: 1.35rem;
            border: 1px dashed rgba(166, 124, 82, 0.6);
            background: var(--color-highlight);
}

.page-white-papers .future-slot h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            color: var(--color-ink);
            margin-bottom: 0.5rem;
}

.page-white-papers footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-white-papers footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-white-papers footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-white-papers footer a:hover {
color: var(--color-bronze);
}

.page-white-papers .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-white-papers .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-white-papers header {
padding: 3rem 1.5rem 2rem;
    }

    .page-white-papers .intro-panel,
    .page-white-papers .papers-shell,
    .page-white-papers .future-panel {
padding: 2rem 1.5rem;
    }

    .page-white-papers .paper-actions {
flex-direction: column;
    }

    .page-white-papers .btn {
width: 100%;
                text-align: center;
    }
}

/* youre-absolutely-wrong.html */
.page-youre-absolutely-wrong {
--color-parchment: #F5F1E8;
            --color-ink: #1A1614;
            --color-rust: #C84B31;
            --color-bronze: #A67C52;
            --color-graphite: #2D3436;
            --color-highlight: #FFF4E0;
            --color-shadow: rgba(26, 22, 20, 0.08);
}

.page-youre-absolutely-wrong,
.page-youre-absolutely-wrong * {
margin: 0;
            padding: 0;
            box-sizing: border-box;
}

.page-youre-absolutely-wrong {
font-family: 'Work Sans', sans-serif;
            background: var(--color-parchment);
            color: var(--color-ink);
            line-height: 1.6;
            overflow-x: hidden;
}

.page-youre-absolutely-wrong::before {
content: '';
            position: fixed;
            inset: 0;
            background-image:
                repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 20, 0.02) 2px, rgba(26, 22, 20, 0.02) 4px);
            background-size: 40px 40px;
            opacity: 0;
            animation: fadeInPattern 2s ease-out forwards;
            pointer-events: none;
            z-index: 0;
}

.page-youre-absolutely-wrong header {
position: relative;
            padding: 4rem 2rem 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            overflow: hidden;
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-youre-absolutely-wrong header::after {
content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
                var(--color-rust) 0%,
                var(--color-bronze) 50%,
                var(--color-rust) 100%);
            animation: shimmer 3s ease-in-out infinite;
}

.page-youre-absolutely-wrong .guild-mark {
text-align: center;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.3s forwards;
}

.page-youre-absolutely-wrong .guild-mark .emblem {
font-family: 'Courier Prime', monospace;
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-bronze);
            letter-spacing: -0.02em;
            text-shadow: 0 2px 20px rgba(166, 124, 82, 0.3);
}

.page-youre-absolutely-wrong .eyebrow {
text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-bronze);
            margin-bottom: 0.85rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.45s forwards;
}

.page-youre-absolutely-wrong h1 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2.7rem, 6.8vw, 5rem);
            font-weight: 900;
            color: var(--color-parchment);
            text-align: center;
            letter-spacing: -0.03em;
            line-height: 1.05;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.55s forwards;
}

.page-youre-absolutely-wrong .subtitle {
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
            font-weight: 300;
            color: var(--color-bronze);
            text-align: center;
            max-width: 920px;
            margin: 0 auto 1.75rem;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.7s forwards;
}

.page-youre-absolutely-wrong .article-meta {
display: flex;
            justify-content: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            color: var(--color-parchment);
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
}

.page-youre-absolutely-wrong .article-meta span {
padding: 0.35rem 0.85rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: rgba(166, 124, 82, 0.08);
}

.page-youre-absolutely-wrong .back-link {
text-align: center;
            margin-top: 1.2rem;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.95s forwards;
}

.page-youre-absolutely-wrong .back-link a {
color: var(--color-bronze);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
}

.page-youre-absolutely-wrong .back-link a:hover {
color: var(--color-rust);
}

.page-youre-absolutely-wrong .container {
max-width: 1060px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
}

.page-youre-absolutely-wrong .article-shell {
margin: 5rem auto;
            background: white;
            padding: 4rem 3rem;
            box-shadow:
                0 4px 6px var(--color-shadow),
                0 10px 20px var(--color-shadow);
            opacity: 0;
            animation: fadeInScale 1s ease-out 1s forwards;
}

.page-youre-absolutely-wrong .article-nav {
display: flex;
            gap: 0.9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
}

.page-youre-absolutely-wrong .article-nav a {
text-decoration: none;
            color: var(--color-rust);
            font-weight: 600;
            letter-spacing: 0.03em;
            padding: 0.8rem 1.1rem;
            border: 1px solid rgba(166, 124, 82, 0.35);
            background: var(--color-highlight);
            transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.page-youre-absolutely-wrong .article-nav a:hover {
color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px var(--color-shadow);
}

.page-youre-absolutely-wrong .lead,
.page-youre-absolutely-wrong .callout,
.page-youre-absolutely-wrong .closing-statement,
.page-youre-absolutely-wrong .quote-block {
padding: 2rem;
            margin-bottom: 3rem;
}

.page-youre-absolutely-wrong .lead {
background: linear-gradient(180deg, var(--color-highlight) 0%, white 100%);
            border-left: 4px solid var(--color-rust);
}

.page-youre-absolutely-wrong .lead p {
font-size: 1.16rem;
            line-height: 1.85;
            color: var(--color-graphite);
}

.page-youre-absolutely-wrong .lead p + p,
.page-youre-absolutely-wrong .callout p + p {
margin-top: 1rem;
}

.page-youre-absolutely-wrong .callout {
background: var(--color-parchment);
            border-left: 4px solid var(--color-bronze);
}

.page-youre-absolutely-wrong .quote-block {
background: linear-gradient(180deg, rgba(245, 241, 232, 0.9) 0%, white 100%);
            border-left: 4px solid var(--color-bronze);
}

.page-youre-absolutely-wrong .quote-block blockquote {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            line-height: 1.55;
}

.page-youre-absolutely-wrong .quote-block p {
margin-top: 1rem;
            font-size: 1.05rem;
            color: var(--color-graphite);
}

.page-youre-absolutely-wrong .section {
margin-bottom: 4rem;
}

.page-youre-absolutely-wrong .section:last-of-type {
margin-bottom: 0;
}

.page-youre-absolutely-wrong .section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-rust);
            margin-bottom: 1.5rem;
            position: relative;
}

.page-youre-absolutely-wrong .section h2::after {
content: '';
            display: block;
            width: 110px;
            height: 4px;
            background: var(--color-bronze);
            margin-top: 0.8rem;
}

.page-youre-absolutely-wrong .section h3 {
font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            color: var(--color-ink);
            margin: 1.8rem 0 0.8rem;
}

.page-youre-absolutely-wrong .section p,
.page-youre-absolutely-wrong .section li,
.page-youre-absolutely-wrong .callout p {
font-size: 1.06rem;
            line-height: 1.82;
            color: var(--color-graphite);
}

.page-youre-absolutely-wrong .section p + p {
margin-top: 1rem;
}

.page-youre-absolutely-wrong .section ul,
.page-youre-absolutely-wrong .section ol {
margin: 1rem 0 0 1.5rem;
}

.page-youre-absolutely-wrong .section li + li {
margin-top: 0.65rem;
}

.page-youre-absolutely-wrong strong {
color: var(--color-rust);
}

.page-youre-absolutely-wrong pre {
margin: 1.5rem 0;
            padding: 1.25rem 1.4rem;
            background: var(--color-ink);
            color: var(--color-parchment);
            overflow-x: auto;
            font-family: 'Courier Prime', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            box-shadow: inset 0 0 0 1px rgba(166, 124, 82, 0.2);
            white-space: pre;
}

.page-youre-absolutely-wrong code {
font-family: 'Courier Prime', monospace;
}

.page-youre-absolutely-wrong .source-list li {
margin-bottom: 0.85rem;
}

.page-youre-absolutely-wrong .closing-statement {
background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            position: relative;
            overflow: hidden;
}

.page-youre-absolutely-wrong .closing-statement::before {
content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(166, 124, 82, 0.22), transparent 55%);
}

.page-youre-absolutely-wrong .closing-statement p {
position: relative;
            color: var(--color-parchment);
            font-size: 1.14rem;
            line-height: 1.9;
}

.page-youre-absolutely-wrong .closing-statement p + p {
margin-top: 1rem;
}

.page-youre-absolutely-wrong .paper-mark {
margin-top: 2.2rem;
            text-align: center;
            color: var(--color-bronze);
            letter-spacing: 0.06em;
}

.page-youre-absolutely-wrong .cta-section {
margin: 4rem auto;
            padding: 3rem;
            background: linear-gradient(135deg, var(--color-graphite) 0%, var(--color-ink) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
}

.page-youre-absolutely-wrong .cta-section::before {
content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(166, 124, 82, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
}

.page-youre-absolutely-wrong .cta-section h2 {
font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--color-parchment);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
}

.page-youre-absolutely-wrong .cta-section p {
font-size: 1.18rem;
            color: var(--color-bronze);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
}

.page-youre-absolutely-wrong .cta-buttons {
display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
}

.page-youre-absolutely-wrong .btn {
font-family: 'Work Sans', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.05em;
            position: relative;
            overflow: hidden;
}

.page-youre-absolutely-wrong .btn-primary {
background: var(--color-rust);
            color: white;
}

.page-youre-absolutely-wrong .btn-primary:hover {
transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200, 75, 49, 0.4);
}

.page-youre-absolutely-wrong .btn-secondary {
background: transparent;
            color: var(--color-parchment);
            border: 2px solid var(--color-bronze);
}

.page-youre-absolutely-wrong .btn-secondary:hover {
background: var(--color-bronze);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(166, 124, 82, 0.4);
}

.page-youre-absolutely-wrong footer {
background: var(--color-ink);
            color: var(--color-bronze);
            padding: 3rem 2rem 2rem;
            text-align: center;
            margin-top: 6rem;
}

.page-youre-absolutely-wrong footer p {
font-size: 0.95rem;
            margin-bottom: 0.5rem;
            opacity: 0.8;
}

.page-youre-absolutely-wrong footer a {
color: var(--color-rust);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
}

.page-youre-absolutely-wrong footer a:hover {
color: var(--color-bronze);
}

.page-youre-absolutely-wrong .github-link {
display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background: rgba(166, 124, 82, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
}

.page-youre-absolutely-wrong .github-link:hover {
background: rgba(166, 124, 82, 0.2);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-youre-absolutely-wrong header {
padding: 3rem 1.5rem 2rem;
    }

    .page-youre-absolutely-wrong .article-shell,
    .page-youre-absolutely-wrong .cta-section {
padding: 2rem 1.5rem;
    }

    .page-youre-absolutely-wrong .lead,
    .page-youre-absolutely-wrong .callout,
    .page-youre-absolutely-wrong .closing-statement,
    .page-youre-absolutely-wrong .quote-block {
padding: 1.5rem;
    }

    .page-youre-absolutely-wrong .cta-buttons {
flex-direction: column;
                align-items: center;
    }

    .page-youre-absolutely-wrong .btn {
width: 100%;
                max-width: 320px;
    }
}