/* ============================================
   TECHY BLACK & WHITE THEME
   ============================================ */

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --accent: #ffffff;
    --border: #2a2a2a;
    --code-bg: #0d0d0d;
    --green: #55d17a;
    --red: #ff6b6b;
    --amber: #f2c14e;
    --cyan: #64c7ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 16px;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

nav {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0;
}

.logo::before {
    content: '>';
    margin-right: 8px;
    opacity: 0.5;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    text-transform: lowercase;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
}

/* ============================================
   MAIN CONTENT CONTAINER
   ============================================ */

main {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 8rem 2rem 4rem;
    min-height: calc(100vh - 100px);
    min-width: 0;
}

/* ============================================
   HOME PAGE
   ============================================ */

.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.intro-content p {
    font-size: 1.3rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.intro-content .handwritten {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    font-weight: 600;
}

.home-shell {
    max-width: 1040px;
}

.hero-section {
    display: flex;
    min-height: 62vh;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0 5rem;
}

.eyebrow {
    margin-bottom: 1rem;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

.hero-section h1 {
    max-width: 850px;
    font-size: clamp(2.5rem, 6vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.055em;
}

.hero-section h1 span {
    color: var(--text-secondary);
}

.hero-copy {
    max-width: 650px;
    margin: 1.75rem 0 2rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.projects-section {
    padding: 5rem 0 2rem;
    scroll-margin-top: 4rem;
    border-top: 1px solid var(--border);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.section-heading h2 {
    font-size: 2rem;
}

.section-heading > p {
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.project-card {
    display: flex;
    min-height: 340px;
    flex-direction: column;
    padding: 1.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: transform 0.2s, border-color 0.2s;
}

.project-card:hover {
    transform: translateY(-3px);
    border-color: var(--text-muted);
}

.project-card.featured {
    background: linear-gradient(145deg, #151515, #0d0d0d);
}

.project-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.status-live {
    color: var(--green);
}

.project-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.35rem;
}

.project-card > p {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.25rem 0;
}

.project-tech span {
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.project-card > a {
    margin-top: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.draft-banner {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.4rem;
    border: 1px solid #4a4022;
    border-radius: 8px;
    background: rgba(242, 193, 78, 0.06);
}

.draft-banner > span {
    height: fit-content;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--amber);
    border-radius: 3px;
    color: var(--amber);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.draft-banner h2 {
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.draft-banner p {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.writing-section {
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--border);
}

.section-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

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

.writing-card {
    display: flex;
    min-height: 270px;
    flex-direction: column;
    padding: 1.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: transform 0.2s, border-color 0.2s;
}

.writing-card:hover {
    transform: translateY(-3px);
    border-color: var(--text-muted);
}

.writing-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.6rem;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.writing-meta span:last-child {
    color: var(--text-muted);
}

.writing-card h3 {
    margin-bottom: 0.7rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.writing-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.writing-card > a {
    margin-top: auto;
    padding-top: 1.2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}

.upcoming-writing {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid #4a4022;
    border-radius: 8px;
    background: rgba(242, 193, 78, 0.05);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.upcoming-writing > span {
    padding: 0.18rem 0.4rem;
    border: 1px solid var(--amber);
    border-radius: 3px;
    color: var(--amber);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    white-space: nowrap;
}

.upcoming-writing strong {
    color: var(--text-primary);
}

/* Buttons */
.btn {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    padding: 0.85rem 2rem;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.btn.primary {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.btn.primary:hover {
    opacity: 0.85;
}

.btn.secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn.secondary:hover {
    border-color: var(--text-primary);
}

/* ============================================
   BLOG LIST PAGE - SERIES GRID
   ============================================ */

.blog-content {
    padding-top: 2rem;
}

.page-title {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0;
}

.page-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

/* Series Grid */
.series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.series-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.series-card:hover {
    border-color: var(--text-muted);
    transform: translateY(-2px);
}

.series-card .series-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--bg-primary);
    background: var(--text-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
    margin-bottom: 1rem;
}

.series-card .series-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: 0;
    line-height: 1.3;
}

.series-card .series-title a {
    color: var(--text-primary);
    transition: opacity 0.2s;
}

.series-card .series-title a:hover {
    opacity: 0.7;
}

.series-card .series-meta {
    display: flex;
    gap: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.series-card .series-meta span::before {
    content: '//';
    margin-right: 0.4rem;
    opacity: 0.5;
}

.series-card .series-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.series-card .series-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: opacity 0.2s;
}

.series-card .series-link:hover {
    opacity: 0.7;
}

/* ============================================
   SERIES PAGE - POST LIST
   ============================================ */

.series-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.series-header .series-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--bg-primary);
    background: var(--text-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 1rem;
}

.series-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.series-header .series-meta {
    display: flex;
    gap: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.series-header .series-meta span::before {
    content: '//';
    margin-right: 0.5rem;
    opacity: 0.5;
}

.series-header .series-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Posts List in Series */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.post-item:first-child {
    padding-top: 0;
}

.post-item:last-child {
    border-bottom: none;
}

.post-item .post-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 2rem;
    padding-top: 0.2rem;
}

.post-item .post-content {
    flex: 1;
}

.post-item .post-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0;
}

.post-item .post-title a {
    color: var(--text-primary);
    transition: opacity 0.2s;
}

.post-item .post-title a:hover {
    opacity: 0.7;
}

.post-item .post-meta {
    display: flex;
    gap: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.post-item .post-meta span::before {
    content: '//';
    margin-right: 0.4rem;
    opacity: 0.5;
}

.post-item .post-excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.post-item .post-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-left: 0.5rem;
}

.post-item .post-status.coming-soon {
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ============================================
   SERIES KNOWLEDGE GRAPH
   ============================================ */

.learning-map {
    margin: 3.5rem 0 4.5rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.map-heading {
    max-width: 38rem;
    margin-bottom: 2.5rem;
}

.map-kicker {
    margin-bottom: 0.35rem;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.map-heading h2,
.chapters-heading h2 {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-size: 1.45rem;
    line-height: 1.3;
}

#learning-map-title {
    scroll-margin-top: 6rem;
}

.map-heading > p:last-child {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.knowledge-graph {
    position: relative;
}

.graph-stage {
    padding: 1.5rem;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.graph-stage.compact-stage {
    padding-bottom: 1.5rem;
}

.graph-stage-label {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.graph-stage-label > span {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--text-muted);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

.graph-stage-label strong,
.graph-stage-label small {
    display: block;
}

.graph-stage-label strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.graph-stage-label small {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.67rem;
}

.graph-branches {
    position: relative;
    display: grid;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
}

.graph-branches.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graph-branches::after {
    position: absolute;
    right: 16.666%;
    bottom: 0.7rem;
    left: 16.666%;
    border-top: 1px solid var(--border);
    content: '';
}

.knowledge-node {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 6.3rem;
    padding: 0.85rem;
    align-content: center;
    border: 1px solid var(--border);
    border-top: 2px solid var(--text-muted);
    background: var(--bg-tertiary);
    transition: border-color 0.2s, background 0.2s;
}

.knowledge-node:hover {
    border-color: var(--text-secondary);
    background: #202020;
}

.knowledge-node::after {
    position: absolute;
    bottom: -1.55rem;
    left: 50%;
    height: 1.5rem;
    border-left: 1px solid var(--border);
    content: '';
}

.knowledge-node.cyan {
    border-top-color: var(--cyan);
}

.knowledge-node.amber {
    border-top-color: var(--amber);
}

.knowledge-node.green {
    border-top-color: var(--green);
}

.knowledge-node.red {
    border-top-color: var(--red);
}

.knowledge-node strong,
.knowledge-node small {
    display: block;
}

.knowledge-node strong {
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.knowledge-node small {
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    line-height: 1.5;
}

.graph-merge {
    position: relative;
    display: grid;
    min-height: 2.4rem;
    place-items: center;
}

.graph-merge::before {
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 50%;
    border-left: 1px solid var(--border);
    content: '';
}

.graph-merge span {
    position: relative;
    z-index: 1;
    padding: 0.2rem 0.55rem;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.61rem;
    text-align: center;
}

.knowledge-hub {
    display: grid;
    max-width: 22rem;
    min-height: 4.6rem;
    margin: 0 auto;
    padding: 0.85rem 1rem;
    place-content: center;
    border: 1px solid var(--cyan);
    background: rgba(100, 199, 255, 0.06);
    text-align: center;
}

.knowledge-hub span,
.knowledge-hub strong {
    display: block;
}

.knowledge-hub span {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
}

.knowledge-hub strong {
    margin-top: 0.25rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.knowledge-hub.final-hub {
    border-color: var(--green);
    background: rgba(85, 209, 122, 0.06);
}

.graph-down {
    position: relative;
    display: grid;
    min-height: 4.2rem;
    place-items: center;
}

.graph-down::before {
    position: absolute;
    height: 4.2rem;
    border-left: 1px dashed var(--text-muted);
    content: '';
}

.graph-down span {
    position: relative;
    z-index: 1;
    padding: 0.25rem 0.65rem;
    background: var(--bg-primary);
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.61rem;
    text-align: center;
}

.sequence-graph {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.45rem;
    padding-bottom: 1.5rem;
}

.sequence-graph > span {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.sequence-graph .knowledge-node {
    min-height: 7.2rem;
}

.sequence-graph .knowledge-node::after {
    bottom: -1.55rem;
}

.chapters-heading {
    margin-bottom: 1.5rem;
}

.series-chapters {
    scroll-margin-top: 6rem;
}

/* Legacy blog post entry (for standalone posts) */
.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-post-entry {
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.blog-post-entry:hover {
    border-color: var(--text-muted);
}

.blog-post-entry .post-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: 0;
}

.blog-post-entry .post-title a {
    color: var(--text-primary);
    transition: opacity 0.2s;
}

.blog-post-entry .post-title a:hover {
    opacity: 0.7;
}

.blog-post-entry .post-meta {
    display: flex;
    gap: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.blog-post-entry .post-meta span::before {
    content: '//';
    margin-right: 0.5rem;
    opacity: 0.5;
}

.blog-post-entry .post-excerpt {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-post-entry .read-more {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: opacity 0.2s;
}

.blog-post-entry .read-more:hover {
    opacity: 0.7;
}

/* ============================================
   BLOG POST PAGE
   ============================================ */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 3rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--text-primary);
}

/* Post Header */
.post-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

article,
.post-header,
.post-body {
    width: 100%;
    min-width: 0;
}

.post-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 1.5rem;
}

.post-header .post-meta {
    display: flex;
    gap: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.post-header .post-meta span::before {
    content: '//';
    margin-right: 0.5rem;
    opacity: 0.5;
}

/* Post Body */
.post-body {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.post-body p {
    margin-bottom: 1.5rem;
}

.post-body .intro {
    font-size: 1.15rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-left: 2px solid var(--text-muted);
    margin-bottom: 2rem;
    font-family: 'JetBrains Mono', monospace;
}

.post-body h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 3rem 0 1.2rem;
    letter-spacing: 0;
    scroll-margin-top: 6rem;
}

.post-body h2::before {
    content: '#';
    margin-right: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.post-body h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2.5rem 0 1rem;
    scroll-margin-top: 6rem;
}

.post-body h3::before {
    content: '##';
    margin-right: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9em;
}

.post-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.post-body em {
    font-style: italic;
}

.post-body a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s;
}

.post-body a:hover {
    opacity: 0.7;
}

.post-body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    background: var(--code-bg);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.post-body ol,
.post-body ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.post-body li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.post-body ul {
    list-style: none;
}

.post-body ul > li::before {
    content: '-';
    color: var(--text-muted);
    margin-right: 0.75rem;
    margin-left: -1.5rem;
}

.post-body ol {
    list-style: none;
    counter-reset: item;
}

.post-body ol > li {
    counter-increment: item;
}

.post-body ol > li::before {
    content: counter(item, decimal-leading-zero);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 1rem;
    margin-left: -1.5rem;
}

/* Nested lists */
.post-body ul ul,
.post-body ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 3rem 0;
}

/* Figure/Image */
figure {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 2.5rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

figure img {
    width: 100%;
    border-radius: 4px;
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.3s;
}

figure:hover img {
    filter: grayscale(0%);
}

figcaption {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1rem;
    text-align: center;
}

figcaption::before {
    content: '// ';
    opacity: 0.5;
}

/* Next Section CTA */
.next-section {
    margin-top: 4rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.next-section h2 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

.next-section h2::before {
    content: '>';
    margin-right: 0.75rem;
    color: var(--text-muted);
}

.next-section a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 4px;
    transition: opacity 0.2s;
    text-decoration: none;
}

.next-section a:hover {
    opacity: 0.9;
}

/* ============================================
   MATHJAX STYLING
   ============================================ */

.MathJax {
    color: var(--text-primary) !important;
}

mjx-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
    margin-top: auto;
}

footer p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

.post-body pre {
    width: 100%;
    max-width: 100%;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.post-body pre code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    line-height: 1.6;
}

/* ============================================
   ARCHITECTURE DIAGRAMS
   ============================================ */

.diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2rem 1rem;
}

.diagram-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.diagram-box {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    padding: 0.6rem 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    text-align: center;
}

.diagram-box.accent {
    border-color: var(--text-muted);
}

.diagram-box.wide {
    min-width: 240px;
}

.diagram-box.small {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
}

.diagram-arrow {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    padding: 0.3rem 0;
    text-align: center;
}

.diagram-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.2rem 0;
}

.diagram-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 1rem 1.5rem;
    border: 1px dashed var(--border);
    border-radius: 6px;
    position: relative;
}

.diagram-group-label {
    position: absolute;
    top: -0.6rem;
    right: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0 0.4rem;
}

/* ============================================
   ATTENTION GRID
   ============================================ */

.attention-grid {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.attention-grid table {
    border-collapse: collapse;
    width: auto;
    margin: 0 auto;
}

.attention-grid th,
.attention-grid td {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    padding: 0.5rem 0.7rem;
    text-align: center;
    border: 1px solid var(--border);
}

.attention-grid th {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    font-weight: 600;
}

.attention-grid td {
    color: var(--text-secondary);
}

.attention-grid .attn-high {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-weight: 600;
}

.attention-grid .attn-med {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

.attention-grid .attn-low {
    background: transparent;
    color: var(--text-muted);
}

.attention-grid .attn-mask {
    background: transparent;
    color: var(--text-muted);
    opacity: 0.3;
}

.attention-grid .row-label {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.post-body table {
    border-collapse: collapse;
    width: auto;
    margin: 1.5rem 0;
}

.post-body table th,
.post-body table td {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.post-body table th {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    font-weight: 600;
}

/* ============================================
   FIRST-PRINCIPLES ARTICLE VISUALS
   ============================================ */

.post-part {
    margin-bottom: 0.85rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.concept-figure,
.media-figure {
    overflow: hidden;
}

.post-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.three-jobs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.three-jobs > div {
    min-width: 0;
    padding: 1.1rem;
    border-right: 1px solid var(--border);
}

.three-jobs > div:last-child {
    border-right: none;
}

.three-jobs strong,
.three-jobs small,
.shape-chip span,
.shape-chip small {
    display: block;
}

.three-jobs strong {
    margin: 0.35rem 0;
    color: var(--text-primary);
    font-size: 0.92rem;
}

.three-jobs small,
.shape-chip small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    line-height: 1.5;
}

.job-index {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.shape-ledger {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.shape-chip {
    min-width: 0;
    padding: 0.9rem;
    background: var(--bg-secondary);
}

.shape-chip b {
    display: inline-grid;
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: 0.5rem;
    place-items: center;
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
}

.shape-chip span {
    color: var(--text-primary);
    font-size: 0.85rem;
}

.shape-journey,
.softmax-flow,
.gradient-flow,
.journey-map,
.mlp-width,
.gpt-stack,
.generation-loop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.shape-journey {
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.shape-journey code {
    color: var(--cyan);
}

.insight {
    margin: 2rem 0;
    padding: 1rem 1.2rem;
    border-left: 2px solid var(--green);
    background: rgba(85, 209, 122, 0.06);
}

.insight p {
    margin: 0;
}

.dimension-bars {
    display: grid;
    gap: 0.8rem;
}

.dimension-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(7rem, 1fr) 10.5rem;
    align-items: center;
    gap: 0.8rem;
}

.dimension-track {
    display: block;
    height: 0.6rem;
    overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

.dimension-track i {
    display: block;
    height: 100%;
    background: var(--cyan);
}

.dimension-row code:last-child {
    text-align: right;
}

.matmul-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.mini-matrix {
    display: grid;
    gap: 1px;
    min-width: max-content;
    background: var(--border);
    border: 1px solid var(--border);
}

.mini-matrix.one-row {
    grid-template-columns: repeat(3, 2.4rem);
}

.mini-matrix.three-by-two {
    grid-template-columns: repeat(2, 2.4rem);
}

.mini-matrix.result {
    grid-template-columns: repeat(2, 2.4rem);
}

.mini-matrix span {
    display: grid;
    height: 2.2rem;
    place-items: center;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.mini-matrix.result span {
    color: var(--green);
}

.matmul-working {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
    text-align: center;
}

.finite-difference {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.finite-difference > div {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: 1rem 0.6rem;
    background: var(--bg-secondary);
    text-align: center;
}

.finite-difference span {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
}

.finite-difference .limit-row span {
    color: var(--green);
}

.gradient-flow {
    flex-wrap: wrap;
}

.flow-node {
    min-width: 9.5rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.flow-node code,
.flow-node small {
    display: block;
}

.flow-node small {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.flow-node.accent-red {
    border-color: var(--red);
}

.flow-arrow {
    color: var(--text-muted);
}

.backward-line {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
    color: var(--red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
}

.backward-shapes,
.parameter-ledger,
.shape-trace {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.backward-shapes > div,
.parameter-ledger > div,
.shape-trace > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.8rem 1rem;
    background: var(--bg-secondary);
}

.backward-shapes strong,
.parameter-ledger span,
.shape-trace span {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.softmax-flow {
    flex-wrap: wrap;
}

.softmax-flow > div {
    min-width: 12rem;
    text-align: center;
}

.softmax-flow small,
.softmax-flow code {
    display: block;
}

.softmax-flow small {
    margin-bottom: 0.35rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.probability-bars {
    display: grid;
    gap: 0.6rem;
    max-width: 28rem;
    margin: 1.25rem auto 0;
}

.probability-bars > span {
    display: grid;
    grid-template-columns: 3.5rem minmax(8rem, 1fr) 3.5rem;
    align-items: center;
    gap: 0.6rem;
}

.probability-bars b {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.probability-bars i {
    position: relative;
    display: block;
    height: 0.55rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

.probability-bars i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p);
    background: var(--green);
    content: '';
}

.journey-map {
    flex-wrap: wrap;
}

.journey-map > div {
    display: grid;
    min-width: 10.5rem;
    min-height: 6.5rem;
    padding: 0.8rem;
    align-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.journey-map small,
.journey-map code,
.journey-map strong {
    display: block;
}

.journey-map small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.journey-map code {
    margin: 0.25rem 0;
    color: var(--cyan);
}

.journey-map strong {
    font-size: 0.75rem;
}

.block-schematic {
    display: grid;
    gap: 0.6rem;
}

.stream-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.stream-line.highlighted {
    border-color: var(--green);
}

.stream-line span,
.block-branch span {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.block-branch {
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    padding: 0.5rem 0;
}

.block-branch strong {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    text-align: center;
}

.mask-matrix {
    display: grid;
    grid-template-columns: 4.5rem repeat(3, minmax(3.5rem, 1fr));
    max-width: 28rem;
    margin: 0 auto;
    overflow-x: auto;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.mask-matrix > div {
    display: grid;
    min-height: 2.7rem;
    place-items: center;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.mask-head {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.mask-head.row {
    justify-content: end;
    padding-right: 0.75rem;
}

.allowed {
    color: var(--green);
    background: rgba(85, 209, 122, 0.07);
}

.blocked {
    color: var(--red);
    background: rgba(255, 107, 107, 0.05);
}

.attention-move {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) 5rem minmax(12rem, 1.5fr);
    align-items: center;
    gap: 1rem;
}

.token-column,
.weight-column {
    display: grid;
    gap: 0.5rem;
}

.token-column span,
.weight-column span {
    min-height: 2.2rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.token-column small {
    color: var(--text-muted);
}

.weight-column span {
    position: relative;
    overflow: hidden;
    text-align: right;
}

.weight-column span::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    background: rgba(242, 193, 78, 0.28);
    content: '';
}

.weighted-result {
    padding: 1rem;
    border-left: 2px solid var(--amber);
}

.weighted-result small,
.weighted-result code {
    display: block;
}

.weighted-result small {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.mlp-width {
    flex-wrap: wrap;
}

.mlp-width > div {
    display: grid;
    width: 8rem;
    min-height: 5rem;
    place-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.mlp-width > div.expanded {
    width: 14rem;
    border-color: var(--amber);
}

.mlp-width code,
.mlp-width small {
    display: block;
}

.mlp-width small {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.shape-trace > div {
    grid-template-columns: minmax(8rem, 1fr) auto;
}

.shape-trace code {
    color: var(--cyan);
    text-align: right;
}

.shape-trace.compact {
    margin: 1.5rem 0;
}

.reference-list li {
    overflow-wrap: anywhere;
}

.sequence-shift {
    display: grid;
    gap: 0.55rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.sequence-shift > div {
    display: grid;
    grid-template-columns: 5rem repeat(4, minmax(5rem, 1fr));
    min-width: 31rem;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.sequence-shift small,
.sequence-shift code {
    display: grid;
    min-height: 2.7rem;
    place-items: center;
    background: var(--bg-secondary);
}

.sequence-shift small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.gpt-stack {
    flex-direction: column;
}

.gpt-stack > div {
    min-width: min(100%, 24rem);
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.gpt-stack small,
.gpt-stack code,
.gpt-stack strong {
    display: block;
}

.gpt-stack small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.67rem;
}

.split-node {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.split-node span {
    display: grid;
    gap: 0.3rem;
}

.repeat-node {
    border-color: var(--cyan) !important;
}

.logit-node {
    border-color: var(--green) !important;
}

.loss-pick {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto minmax(12rem, 1fr);
    align-items: center;
    gap: 1rem;
}

.logit-list {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.logit-list span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg-tertiary);
}

.logit-list span.correct {
    color: var(--green);
}

.loss-arrow {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-align: center;
}

.target-prob {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    border-left: 2px solid var(--green);
}

.target-prob small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.parameter-ledger > div {
    grid-template-columns: minmax(8rem, 1fr) auto auto;
}

.parameter-ledger strong {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-align: right;
}

.parameter-ledger .parameter-total {
    background: rgba(100, 199, 255, 0.06);
}

.parameter-ledger .parameter-total strong {
    color: var(--cyan);
}

.generation-loop {
    flex-wrap: wrap;
}

.generation-loop > div {
    display: grid;
    gap: 0.35rem;
    min-height: 5.5rem;
    min-width: 10rem;
    max-width: 15rem;
    padding: 0.8rem;
    place-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.generation-loop small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.67rem;
}

.loop-back {
    flex-basis: 100%;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-align: center;
}

.plot-svg,
.optimizer-svg {
    display: block;
    width: 100%;
    height: auto;
}

.plot-axis {
    stroke: var(--text-muted);
    stroke-width: 1.5;
}

.plot-relu,
.plot-gelu,
.path-sgd,
.path-momentum {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plot-relu {
    stroke: var(--cyan);
    stroke-width: 4;
}

.plot-gelu {
    stroke: var(--amber);
    stroke-width: 4;
}

.plot-label {
    fill: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
}

.relu-label {
    fill: var(--cyan);
}

.gelu-label,
.adam-label {
    fill: var(--amber);
}

.sgd-label {
    fill: var(--red);
}

.loss-contour {
    fill: none;
    stroke: var(--border);
    stroke-width: 2;
}

.loss-minimum {
    fill: var(--text-primary);
}

.path-sgd {
    stroke: var(--red);
    stroke-width: 3;
}

.path-momentum {
    stroke: var(--amber);
    stroke-width: 4;
}

.two-pass-flow {
    display: grid;
    gap: 0.8rem;
    overflow-x: auto;
}

.pass-row {
    display: grid;
    grid-template-columns: 6.5rem repeat(9, auto);
    align-items: center;
    gap: 0.45rem;
    min-width: 38rem;
}

.pass-row strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

.pass-row code {
    min-width: 3rem;
    padding: 0.45rem;
    text-align: center;
}

.forward-row strong {
    color: var(--cyan);
}

.backward-row strong,
.backward-row span {
    color: var(--red);
}

.training-cycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.training-cycle > div {
    display: grid;
    min-width: 7.2rem;
    min-height: 6.2rem;
    padding: 0.7rem;
    place-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.training-cycle b,
.training-cycle strong,
.training-cycle small {
    display: block;
}

.training-cycle b {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

.training-cycle strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.training-cycle small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
}

.training-cycle em {
    flex-basis: 100%;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-align: center;
}

.gradient-decay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.gradient-decay > div {
    display: grid;
    min-width: 5.2rem;
    min-height: 4.5rem;
    place-content: center;
    border: 1px solid rgba(255, 107, 107, var(--strength));
    background: rgba(255, 107, 107, 0.06);
    text-align: center;
    opacity: var(--strength);
}

.gradient-decay code,
.gradient-decay strong {
    display: block;
}

.gradient-decay strong {
    color: var(--red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.gradient-decay > span {
    min-width: max-content;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.compute-graph {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0.65rem;
}

.compute-graph > div {
    min-width: 0;
}

.graph-leaves {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.graph-leaves code {
    padding: 0.5rem 0.25rem;
    text-align: center;
}

.graph-op {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.graph-op::before {
    color: var(--text-muted);
    content: '\2192';
}

.graph-op span {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
}

.graph-op strong {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
}

.graph-op.final {
    border-color: var(--red);
}

.graph-op.final strong {
    color: var(--red);
}

.smoke-result {
    display: grid;
    gap: 1.2rem;
}

.smoke-loss {
    display: grid;
    gap: 0.55rem;
}

.smoke-loss span {
    display: grid;
    grid-template-columns: 4.7rem minmax(7rem, 1fr) 4rem;
    align-items: center;
    gap: 0.7rem;
}

.smoke-loss i {
    position: relative;
    display: block;
    height: 0.55rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

.smoke-loss i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--loss);
    background: var(--green);
    content: '';
}

.smoke-loss strong {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    text-align: right;
}

.post-body pre.terminal-output {
    margin: 0;
    background: #080808;
}

.backend-switch {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
    align-items: center;
    gap: 1rem;
}

.backend-switch > div {
    padding: 0.9rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.backend-switch small,
.backend-switch code {
    display: block;
}

.backend-switch small {
    margin-bottom: 0.45rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.backend-switch > span {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-align: center;
}

.backend-options {
    display: grid;
    gap: 0.6rem;
}

.backend-options code:first-child {
    color: var(--amber);
}

.backend-options code:last-child {
    color: var(--green);
}

/* ============================================
   INTRODUCTION AND ARRAY DIAGRAMS
   ============================================ */

.next-piece-demo {
    display: grid;
    gap: 1.5rem;
    max-width: 34rem;
    margin: 0 auto;
}

.prompt-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.prompt-strip code,
.prompt-strip span {
    display: grid;
    min-width: 3.3rem;
    min-height: 2.8rem;
    padding: 0.5rem 0.7rem;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.prompt-strip span {
    border-color: var(--amber);
    color: var(--amber);
    font-family: 'JetBrains Mono', monospace;
}

.candidate-list {
    display: grid;
    gap: 0.7rem;
}

.candidate-list > span {
    display: grid;
    grid-template-columns: 5.5rem minmax(8rem, 1fr) 3rem;
    align-items: center;
    gap: 0.8rem;
}

.candidate-list strong,
.candidate-list code {
    font-size: 0.75rem;
}

.candidate-list strong {
    color: var(--text-primary);
}

.candidate-list code {
    color: var(--text-muted);
    text-align: right;
}

.candidate-list i {
    position: relative;
    height: 0.55rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.candidate-list i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: max(2px, var(--score));
    background: var(--green);
    content: '';
}

.plain-learning-loop {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.65rem;
}

.plain-learning-loop > div {
    display: grid;
    width: 8rem;
    min-height: 7rem;
    padding: 0.8rem;
    align-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.plain-learning-loop b,
.plain-learning-loop strong,
.plain-learning-loop small {
    display: block;
}

.plain-learning-loop b {
    margin-bottom: 0.45rem;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.plain-learning-loop strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.plain-learning-loop small {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.61rem;
    line-height: 1.45;
}

.plain-learning-loop > span {
    display: grid;
    place-items: center;
    color: var(--text-muted);
}

.plain-learning-loop > em {
    flex-basis: 100%;
    color: var(--green);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.67rem;
    font-style: normal;
    text-align: center;
}

.mini-matrix.three-by-one,
.mini-matrix.scalar-matrix {
    grid-template-columns: 2.6rem;
}

.broadcast-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1.1rem;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: center;
}

.broadcast-demo span {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
}

.reshape-demo {
    display: grid;
    gap: 0.75rem;
}

.reshape-demo > div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.reshape-demo small {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
}

.reshape-demo code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.reshape-demo span {
    color: var(--text-muted);
}

.linear-collapse {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.linear-collapse > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 5rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.linear-collapse > div:last-child {
    border-color: var(--amber);
}

.linear-collapse > strong,
.linear-collapse span {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

.boundary-svg,
.step-size-svg {
    display: block;
    width: 100%;
    height: auto;
}

.boundary-inner {
    fill: none;
    stroke: var(--green);
    stroke-dasharray: 5 5;
    stroke-width: 1.5;
}

.point-inner {
    fill: var(--green);
}

.point-outer {
    fill: var(--red);
}

.boundary-line {
    stroke: var(--amber);
    stroke-width: 3;
}

.loss-curve {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 3;
}

.step-start {
    fill: var(--text-primary);
}

.step-small,
.step-good,
.step-large {
    fill: none;
    stroke-width: 3;
}

.step-small {
    stroke: var(--cyan);
}

.step-good {
    stroke: var(--green);
}

.step-large {
    stroke: var(--red);
}

.good-label {
    fill: var(--green);
}

.large-label {
    fill: var(--red);
}

.piece-options {
    display: grid;
    gap: 1px;
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    background: var(--border);
}

.piece-options > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) minmax(9rem, auto);
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary);
}

.piece-options small,
.piece-options strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.piece-options small {
    color: var(--cyan);
}

.piece-options strong {
    color: var(--text-muted);
    font-weight: 400;
    text-align: right;
}

.piece-options code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.embedding-lookup {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) auto minmax(13rem, 1.5fr);
    align-items: center;
    gap: 1rem;
}

.embedding-lookup > div {
    display: grid;
    gap: 0.4rem;
}

.embedding-lookup small {
    margin-bottom: 0.25rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.embedding-lookup code {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.embedding-lookup > span {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    text-align: center;
}

.fixed-window {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
}

.fixed-window > div {
    display: grid;
    min-width: 6.2rem;
    min-height: 4.7rem;
    padding: 0.6rem;
    place-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.fixed-window small,
.fixed-window code {
    display: block;
}

.fixed-window small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
}

.fixed-window > span {
    display: grid;
    place-items: center;
    color: var(--cyan);
}

.fixed-window > strong {
    display: grid;
    min-width: 9rem;
    min-height: 4.7rem;
    padding: 0.7rem;
    place-items: center;
    border: 1px solid var(--green);
    color: var(--text-primary);
    font-size: 0.75rem;
    text-align: center;
}

.rolling-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow-x: auto;
}

.rolling-state > div {
    display: grid;
    min-width: 6.5rem;
    min-height: 5.5rem;
    padding: 0.6rem;
    place-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.rolling-state code,
.rolling-state small {
    display: block;
}

.rolling-state small {
    margin-top: 0.35rem;
    color: var(--amber);
    font-family: 'JetBrains Mono', monospace;
}

.rolling-state > span {
    color: var(--text-muted);
}

.direct-lookup {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(11rem, 0.8fr);
    align-items: center;
    gap: 1.5rem;
}

.lookup-history {
    display: grid;
    gap: 0.55rem;
}

.lookup-history > span {
    display: grid;
    grid-template-columns: 5rem minmax(6rem, 1fr) 2.5rem;
    align-items: center;
    gap: 0.55rem;
}

.lookup-history i {
    position: relative;
    height: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.lookup-history i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    background: var(--amber);
    content: '';
}

.lookup-history small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    text-align: right;
}

.lookup-question {
    display: grid;
    min-height: 9rem;
    padding: 1rem;
    place-content: center;
    border-left: 2px solid var(--amber);
    background: var(--bg-tertiary);
    text-align: center;
}

.lookup-question small,
.lookup-question code,
.lookup-question span,
.lookup-question strong {
    display: block;
}

.lookup-question small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
}

.lookup-question span {
    padding: 0.4rem;
    color: var(--cyan);
}

.lookup-question strong {
    color: var(--text-primary);
    font-size: 0.76rem;
}

.qkv-jobs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.qkv-jobs > div {
    display: grid;
    min-height: 8.2rem;
    padding: 1rem;
    align-content: center;
    border: 1px solid var(--border);
    border-top: 2px solid var(--cyan);
    background: var(--bg-secondary);
    text-align: center;
}

.qkv-jobs > div:nth-child(2) {
    border-top-color: var(--amber);
}

.qkv-jobs > div:nth-child(3) {
    border-top-color: var(--green);
}

.qkv-jobs b,
.qkv-jobs strong,
.qkv-jobs small {
    display: block;
}

.qkv-jobs b {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
}

.qkv-jobs strong {
    margin: 0.25rem 0 0.45rem;
    color: var(--text-primary);
    font-size: 0.76rem;
}

.qkv-jobs small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    line-height: 1.5;
}

.score-worked {
    display: grid;
    gap: 1px;
    overflow-x: auto;
    border: 1px solid var(--border);
    background: var(--border);
}

.score-worked > div {
    display: grid;
    grid-template-columns: 6rem repeat(4, minmax(5rem, 1fr));
    min-width: 30rem;
    gap: 1px;
    background: var(--border);
}

.score-worked small,
.score-worked code {
    display: grid;
    min-height: 2.8rem;
    padding: 0.4rem;
    place-items: center;
    background: var(--bg-secondary);
}

.score-worked small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
}

.score-worked .score-final code {
    color: var(--amber);
    background: rgba(242, 193, 78, 0.06);
}

.attention-matrices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.attention-matrices > div {
    display: grid;
    min-width: 8rem;
    min-height: 7rem;
    padding: 0.75rem;
    place-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    text-align: center;
}

.attention-matrices > div.square {
    border-color: var(--amber);
}

.attention-matrices strong,
.attention-matrices code,
.attention-matrices small {
    display: block;
}

.attention-matrices strong {
    color: var(--text-primary);
}

.attention-matrices code {
    margin: 0.3rem 0;
    color: var(--cyan);
}

.attention-matrices small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.59rem;
}

.attention-matrices > span {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.head-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.head-grid > div {
    display: grid;
    gap: 0.7rem;
    min-height: 8rem;
    padding: 0.9rem;
    align-content: center;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.head-grid small,
.head-grid strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
}

.head-grid small {
    color: var(--cyan);
}

.head-grid strong {
    color: var(--text-muted);
    font-weight: 400;
}

.head-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    height: 2.8rem;
    align-items: end;
}

.head-bars i {
    height: var(--w);
    min-height: 0.3rem;
    background: var(--amber);
}

.position-clocks {
    display: grid;
    gap: 0.65rem;
}

.position-clocks > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.position-clocks small {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
}

.position-clocks svg {
    width: 100%;
    height: 3.3rem;
}

.position-clocks path {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
}

.position-clocks > div:nth-child(2) path {
    stroke: var(--amber);
}

.position-clocks > div:nth-child(3) path {
    stroke: var(--green);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    main {
        padding: 6rem 1.5rem 3rem;
    }

    .post-header h1 {
        font-size: 1.8rem;
        overflow-wrap: anywhere;
    }

    .post-body {
        overflow-wrap: break-word;
    }

    .learning-map {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    .graph-stage {
        padding: 1.1rem;
    }

    .graph-branches.three,
    .sequence-graph {
        grid-template-columns: 1fr;
    }

    .graph-branches::after {
        display: none;
    }

    .knowledge-node {
        min-height: 5.4rem;
    }

    .knowledge-node::after {
        bottom: -0.8rem;
        height: 0.75rem;
    }

    .graph-branches {
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .graph-merge {
        min-height: 2.8rem;
    }

    .sequence-graph {
        gap: 0.55rem;
        padding-bottom: 0.8rem;
    }

    .sequence-graph > span {
        min-height: 1rem;
        transform: rotate(90deg);
    }

    .sequence-graph .knowledge-node {
        min-height: 5.4rem;
    }

    .knowledge-hub {
        max-width: 100%;
    }

    .post-header .post-meta,
    .blog-post-entry .post-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .intro-content p {
        font-size: 1.1rem;
    }

    .three-jobs {
        grid-template-columns: 1fr;
    }

    .three-jobs > div {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .three-jobs > div:last-child {
        border-bottom: none;
    }

    .shape-ledger {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dimension-row {
        grid-template-columns: 4.8rem minmax(5rem, 1fr);
    }

    .dimension-row code:last-child {
        grid-column: 1 / -1;
        text-align: left;
    }

    .finite-difference {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backward-line {
        flex-direction: column;
        align-items: center;
    }

    .backward-shapes > div,
    .shape-trace > div {
        grid-template-columns: 1fr;
    }

    .shape-trace code {
        text-align: left;
    }

    .journey-map {
        flex-direction: column;
    }

    .journey-map > div {
        width: 100%;
    }

    .stream-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .attention-move {
        grid-template-columns: 1fr;
    }

    .weight-column {
        grid-row: 2;
    }

    .weighted-result {
        grid-row: 3;
    }

    .loss-pick,
    .parameter-ledger > div {
        grid-template-columns: 1fr;
    }

    .loss-arrow {
        padding: 0.35rem 0;
    }

    .parameter-ledger strong {
        text-align: left;
    }

    .split-node {
        align-items: stretch;
        flex-direction: column;
    }

    .gpt-stack > div {
        min-width: 100%;
    }

    .compute-graph {
        grid-template-columns: 1fr;
    }

    .graph-op::before {
        content: '\2193';
    }

    .backend-switch {
        grid-template-columns: 1fr;
    }

    .smoke-loss span {
        grid-template-columns: 4.5rem minmax(5rem, 1fr);
    }

    .smoke-loss strong {
        grid-column: 1 / -1;
        text-align: left;
    }

    .plain-learning-loop {
        display: grid;
        grid-template-columns: 1fr;
    }

    .plain-learning-loop > div {
        width: 100%;
        min-height: 5.8rem;
    }

    .plain-learning-loop > span {
        min-height: 1rem;
        transform: rotate(90deg);
    }

    .plain-learning-loop > em {
        padding-top: 0.35rem;
    }

    .candidate-list > span {
        grid-template-columns: 4.7rem minmax(5rem, 1fr) 2.7rem;
        gap: 0.5rem;
    }

    .broadcast-demo {
        grid-template-columns: 1fr;
    }

    .broadcast-demo span {
        transform: rotate(90deg);
    }

    .reshape-demo > div {
        grid-template-columns: 1fr;
    }

    .reshape-demo span {
        transform: rotate(90deg);
        text-align: center;
    }

    .linear-collapse {
        grid-template-columns: 1fr;
    }

    .linear-collapse > strong {
        text-align: center;
    }

    .piece-options > div {
        grid-template-columns: 1fr;
    }

    .piece-options strong {
        text-align: left;
    }

    .embedding-lookup,
    .direct-lookup {
        grid-template-columns: 1fr;
    }

    .embedding-lookup > span {
        transform: rotate(90deg);
    }

    .fixed-window > div {
        flex: 1 1 40%;
    }

    .fixed-window > span {
        flex-basis: 100%;
        transform: rotate(90deg);
    }

    .fixed-window > strong {
        flex-basis: 100%;
    }

    .rolling-state {
        justify-content: flex-start;
    }

    .qkv-jobs,
    .head-grid {
        grid-template-columns: 1fr;
    }

    .qkv-jobs > div,
    .head-grid > div {
        min-height: 6.5rem;
    }

    .attention-matrices {
        flex-direction: column;
    }

    .attention-matrices > div {
        width: 100%;
        min-height: 5.7rem;
    }

    .attention-matrices > span {
        transform: rotate(90deg);
    }

    .position-clocks > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .writing-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: 290px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    nav {
        padding-inline: 1rem;
    }

    .nav-links {
        gap: 0.9rem;
    }

    main {
        padding-inline: 1.1rem;
    }

    .hero-section h1 {
        font-size: 2.45rem;
    }

    .draft-banner {
        flex-direction: column;
    }

    .upcoming-writing {
        align-items: flex-start;
        flex-direction: column;
    }
}