.nlp-page {
    --blue-ink: #293954;
    --notebook: #f7f1df;
    --highlighter: #d7ea9f;
    background: var(--notebook);
}

.nlp-hero,
.nlp-mini-hero {
    background-image:
        linear-gradient(rgba(32, 35, 45, .28), rgba(32, 35, 45, .2)),
        url("../images/background1.png");
    background-position: 92% center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.nlp-hero { min-height: 760px; }
.nlp-mini-hero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.nlp-intro,
.notebook-heading {
    margin: 0 auto;
    max-width: 1060px;
    padding: 100px 30px 80px;
}

.nlp-stamp {
    color: #35254b;
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 22px;
    padding: 7px 10px;
    position: relative;
    transform: rotate(-1.5deg);
    z-index: 0;
}

.nlp-stamp::before {
    background: var(--highlighter);
    content: "";
    inset: 2px -5px;
    opacity: .86;
    position: absolute;
    transform: skew(-8deg);
    z-index: -1;
}

.nlp-intro h1,
.notebook-heading h1 {
    font-size: clamp(4.5rem, 10vw, 8.5rem);
    letter-spacing: -.07em;
    line-height: .85;
    margin: 0;
    text-shadow: 0 2px 15px rgba(30, 25, 34, .28);
}

.nlp-intro h1 span { color: #d8ef9d; display: inline-block; transform: rotate(10deg); }
.nlp-intro > p:not(.nlp-stamp),
.notebook-heading > p:not(.nlp-stamp) {
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-style: italic;
    line-height: 1.6;
    margin: 30px 0;
    max-width: 650px;
    text-shadow: 0 1px 8px rgba(30, 25, 34, .35);
}

.scribble-button {
    background: rgba(255, 253, 248, .9);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 6px 7px 0 rgba(73, 51, 97, .35);
    color: var(--blue-ink);
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: .78rem;
    font-weight: 700;
    padding: 14px 18px;
    text-decoration: none;
    transform: rotate(-1deg);
    transition: box-shadow .18s ease, transform .18s ease;
}

.scribble-button:hover { box-shadow: 2px 3px 0 rgba(73, 51, 97, .35); transform: rotate(0) translateY(2px); }
.hero-footnote {
    font-family: "Courier New", monospace;
    font-size: .65rem;
    margin: 0 auto;
    max-width: 1060px;
    padding: 0 30px 30px;
    text-align: right;
}
.hero-footnote span { color: #d8ef9d; }

/* AI / engineering section hub */
.ai-hub {
    margin: 0 auto;
    max-width: 1120px;
    padding: 85px 28px 110px;
}
.ai-hub-intro {
    color: var(--charcoal);
    max-width: 820px;
    text-shadow: 0 1px 9px rgba(255, 255, 255, .65);
}
.ai-hub-intro h1 {
    font-size: clamp(3.8rem, 9vw, 7.5rem);
    letter-spacing: -.065em;
    line-height: .88;
    margin: 0 0 28px;
}
.ai-hub-intro > p:not(.tiny-label) {
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.65;
    max-width: 680px;
}
.ai-paths {
    display: grid;
    gap: clamp(22px, 4vw, 45px);
    grid-template-columns: repeat(2, 1fr);
    margin-top: 65px;
}
.ai-path {
    background-color: rgba(255, 250, 238, .94);
    background-image:
        radial-gradient(circle at 16% 18%, rgba(167, 211, 219, .22), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(224, 238, 178, .2), transparent 35%),
        repeating-linear-gradient(0deg, rgba(74, 61, 55, .025) 0, rgba(74, 61, 55, .025) 1px, transparent 1px, transparent 5px);
    border: 1px solid #c8b9a8;
    box-shadow: 10px 12px 0 rgba(67, 48, 79, .22);
    color: var(--charcoal);
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 34px;
    position: relative;
    text-decoration: none;
    transform: rotate(-1.3deg);
    transition: box-shadow .18s ease, transform .18s ease;
}
.ai-path,
.ai-path * { font-family: Georgia, "Times New Roman", serif; }
.ai-path::before {
    background: rgba(207, 229, 232, .8);
    content: "";
    height: 24px;
    position: absolute;
    right: 12%;
    top: -12px;
    transform: rotate(4deg);
    width: 72px;
}
.ai-path::after {
    border: 1px dashed rgba(91, 71, 100, .18);
    content: "";
    inset: 11px;
    pointer-events: none;
    position: absolute;
}
.archive-ai-path {
    background-color: rgba(255, 248, 242, .95);
    background-image:
        radial-gradient(circle at 84% 20%, rgba(205, 170, 220, .25), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(231, 174, 137, .18), transparent 36%),
        repeating-linear-gradient(0deg, rgba(74, 61, 55, .025) 0, rgba(74, 61, 55, .025) 1px, transparent 1px, transparent 5px);
    box-shadow: -9px 12px 0 rgba(208, 177, 220, .48);
    transform: rotate(1.1deg);
}
.archive-ai-path::before { background: rgba(224, 238, 178, .78); left: 13%; right: auto; transform: rotate(-4deg); }
.ai-path:hover { box-shadow: 3px 4px 0 rgba(255, 255, 255, .5); transform: rotate(0) translateY(-5px); }
.ai-path .path-number { color: #75528b; font-family: "Courier New", monospace; font-size: .68rem; letter-spacing: .1em; position: relative; z-index: 1; }
.ai-path strong {
    align-self: flex-start;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    letter-spacing: -.045em;
    line-height: .98;
    margin: 35px 0 18px;
    transform: none;
}
.archive-ai-path strong { font-style: normal; transform: none; }
.ai-path p { color: #6a625e; line-height: 1.55; margin: 0; max-width: 390px; }
.ai-path small { font-family: "Courier New", monospace; font-size: .68rem; margin-top: auto; padding-top: 30px; }

.current-ai-main { align-items: center; display: flex; justify-content: center; min-height: 690px; padding: 70px 25px 100px; }
.current-ai-note {
    background-color: #fffdf8;
    background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(207, 222, 233, .75) 32px);
    border: 1px solid #cfc2b3;
    box-shadow: 12px 14px 0 rgba(64, 49, 78, .22);
    color: var(--charcoal);
    max-width: 690px;
    padding: 65px 60px 55px;
    position: relative;
    transform: rotate(-1deg);
}
.current-ai-note h1 { font-size: clamp(3.8rem, 9vw, 7rem); letter-spacing: -.06em; line-height: .9; margin: 0 0 28px; }
.current-ai-note > p:not(.tiny-label) { line-height: 1.8; }
.current-ai-note .empty-ai-note { color: #75528b; font-style: italic; }
.current-ai-note a { color: var(--blue-ink); display: inline-block; font-family: "Courier New", monospace; font-size: .7rem; font-weight: 700; margin-top: 24px; text-decoration: none; }

.nlp-main {
    display: grid;
    gap: 80px;
    grid-template-columns: 1.1fr .9fr;
    margin: 0 auto;
    max-width: 1100px;
    padding: 110px 30px;
}

.nlp-hero .nlp-main {
    padding-bottom: 90px;
    padding-top: 90px;
}

.pre-llm-heading {
    color: var(--charcoal);
    grid-column: 1 / -1;
    margin-bottom: -38px;
    max-width: 760px;
    transform: rotate(-.35deg);
}

.nlp-main .pre-llm-heading h1 {
    display: inline-block;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    letter-spacing: -.045em;
    line-height: .95;
    margin: 0 0 14px;
    position: relative;
    z-index: 0;
}

.nlp-main .pre-llm-heading h1::after {
    background: rgba(215, 234, 159, .68);
    bottom: 0;
    content: "";
    height: 17px;
    left: -7px;
    position: absolute;
    transform: rotate(-1deg) skewX(-8deg);
    width: calc(100% + 18px);
    z-index: -1;
}

.pre-llm-heading > p:last-child {
    font-family: "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.6;
    margin: 0;
}

.nlp-hero .nlp-main h1,
.nlp-hero .nlp-main h2 {
    color: var(--charcoal);
    text-shadow: 0 1px 8px rgba(255, 255, 255, .7);
}

.nlp-hero .nlp-detours {
    background: rgba(255, 253, 248, .22);
    border-radius: 3px;
    padding: 30px;
}

.nlp-detours .scribble-button { margin-top: 34px; }

.why-note {
    background-color: #fffdf8;
    background-image: repeating-linear-gradient(transparent, transparent 31px, #dce5ed 32px);
    border: 1px solid #d7cdb9;
    box-shadow: 10px 12px 0 rgba(65, 80, 105, .14);
    color: var(--charcoal);
    padding: 52px 48px 44px;
    position: relative;
    transform: rotate(-1.1deg);
}
.tape {
    background: rgba(216, 239, 157, .7);
    height: 34px;
    left: 38%;
    position: absolute;
    top: -18px;
    transform: rotate(2deg);
    width: 120px;
}
.nlp-main h1,
.nlp-main h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 24px; }
.why-note > p:not(.tiny-label) { font-size: 1rem; line-height: 2; margin: 0 0 18px; }
.nlp-detours { align-self: center; }
.nlp-hero .nlp-detours { color: var(--charcoal); }

.topic-cloud { display: flex; flex-wrap: wrap; gap: 13px; }
.topic-cloud span {
    background: #fffdf8;
    border: 1px solid #cfc5b6;
    box-shadow: 3px 4px 0 #b9d5dc;
    color: var(--charcoal);
    font-family: "Courier New", monospace;
    font-size: .78rem;
    padding: 10px 13px;
    transform: rotate(-1deg);
}
.topic-cloud span:nth-child(even) { box-shadow: 3px 4px 0 #d5bee1; transform: rotate(1.5deg); }

.nlp-footer {
    align-items: center;
    background: var(--blue-ink);
    color: white;
    display: flex;
    font-family: "Courier New", monospace;
    font-size: .7rem;
    justify-content: space-between;
    padding: 28px max(30px, calc((100vw - 1040px) / 2));
}
.nlp-footer a { color: white; text-decoration: none; }

.notebook-heading { padding-bottom: 80px; padding-top: 85px; }
.notebook-heading h1 {
    color: var(--charcoal);
    display: inline-block;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    letter-spacing: -.045em;
    line-height: 1;
    position: relative;
    text-shadow: 0 1px 8px rgba(255, 255, 255, .62);
    transform: rotate(-.5deg);
    z-index: 0;
}

.notebook-heading h1::after {
    background: rgba(215, 234, 159, .68);
    bottom: -3px;
    content: "";
    height: 18px;
    left: -5px;
    position: absolute;
    transform: rotate(-1deg) skewX(-9deg);
    width: calc(100% + 16px);
    z-index: -1;
}
.article-index {
    display: grid;
    gap: 14px;
    margin: 0 auto;
    max-width: 1080px;
    padding: 90px 30px 110px;
}

.nlp-mini-hero .notebook-heading {
    padding-bottom: 28px;
}

.nlp-mini-hero .article-index {
    padding-bottom: 100px;
    padding-top: 20px;
}
.article-slip {
    align-items: center;
    background: #fffdf8;
    border: 1px solid #d6ccbb;
    color: var(--charcoal);
    display: grid;
    gap: 26px;
    grid-template-columns: 120px 1fr auto;
    padding: 24px 26px;
    position: relative;
    text-decoration: none;
    transform: rotate(-.15deg);
    transition: box-shadow .18s ease, transform .18s ease;
}
.article-slip:nth-child(3n + 1) {
    background: #fffdf8;
    box-shadow: 7px 7px 0 rgba(158, 207, 214, .7);
    transform: rotate(-1.15deg) translateX(-5px);
}
.article-slip:nth-child(3n + 2) {
    background: #fffaf4;
    box-shadow: -6px 7px 0 rgba(205, 170, 220, .65);
    transform: rotate(.8deg) translateX(8px);
}
.article-slip:nth-child(3n) {
    background: #fffff4;
    box-shadow: 7px 7px 0 rgba(215, 234, 159, .62);
    transform: rotate(-.45deg) translateX(2px);
}

.article-slip:nth-child(4n + 1)::before,
.article-slip:nth-child(4n + 3)::before {
    background: rgba(225, 239, 178, .72);
    content: "";
    height: 22px;
    position: absolute;
    right: 9%;
    top: -11px;
    transform: rotate(3deg);
    width: 70px;
}

.article-slip:nth-child(4n + 3)::before {
    background: rgba(197, 221, 230, .75);
    left: 12%;
    right: auto;
    transform: rotate(-4deg);
    width: 54px;
}

.article-slip:hover {
    box-shadow: 3px 4px 0 rgba(255, 255, 255, .55);
    transform: rotate(0) translateX(5px) scale(1.012);
    z-index: 2;
}
.article-slip time { color: #766e66; font-family: "Courier New", monospace; font-size: .68rem; }
.article-slip span { font-size: 1.08rem; font-weight: 700; }
.article-slip b { color: #76559a; font-weight: 400; }

.article-series {
    background: #d8c29b;
    border: 1px solid rgba(91, 71, 52, .28);
    box-shadow: 10px 12px 0 rgba(78, 55, 94, .23);
    margin: 22px -18px 28px;
    padding: 0 26px 30px;
    position: relative;
    transform: rotate(.35deg);
}

.article-series::before {
    background: #d8c29b;
    border: 1px solid rgba(91, 71, 52, .28);
    border-bottom: 0;
    content: "";
    height: 27px;
    left: -1px;
    position: absolute;
    top: -27px;
    width: 180px;
}

.article-series::after {
    background: rgba(204, 226, 231, .76);
    content: "";
    height: 30px;
    position: absolute;
    right: 8%;
    top: -14px;
    transform: rotate(4deg);
    width: 96px;
}

.series-tab {
    align-items: end;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    padding: 25px 5px 24px;
}
.series-tab p {
    color: #58416f;
    font-family: "Courier New", monospace;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 5px;
}
.series-tab h2 { color: #322d29; font-size: 2.1rem; margin: 0; }
.series-tab > span { color: #62584f; font-size: .78rem; font-style: italic; padding-bottom: 5px; }
.series-notes { display: grid; gap: 10px; }

.article-series .article-slip:nth-child(n) {
    align-items: center;
    box-shadow: 4px 5px 0 rgba(91, 71, 52, .18);
    direction: ltr;
    display: grid;
    gap: 18px;
    grid-template-columns: 112px minmax(0, 1fr) 24px;
    min-height: 0;
    padding: 19px 22px;
    transform: rotate(-.25deg) translateX(0);
}
.article-series .article-slip time {
    grid-column: 1;
    justify-self: start;
    white-space: nowrap;
}
.article-series .article-slip span {
    grid-column: 2;
    justify-self: start;
    text-align: left;
}
.article-series .article-slip b {
    grid-column: 3;
    justify-self: end;
}
.article-series .article-slip:nth-child(even) { transform: rotate(.3deg) translateX(5px); }
.article-series .article-slip::before {
    background: rgba(225, 239, 178, .78);
    content: "";
    display: block;
    height: 18px;
    left: auto;
    pointer-events: none;
    position: absolute;
    right: 11%;
    top: -9px;
    transform: rotate(3deg);
    width: 52px;
}
.article-series .article-slip:nth-child(even)::before {
    background: rgba(211, 188, 224, .7);
    left: 9%;
    right: auto;
    transform: rotate(-4deg);
    width: 44px;
}
.article-series .article-slip:nth-child(3)::before {
    background: rgba(190, 221, 226, .76);
    left: auto;
    right: 18%;
    transform: rotate(2deg);
}
.article-series .article-slip:hover { box-shadow: 2px 3px 0 rgba(91, 71, 52, .18); transform: rotate(0) translateX(6px); }

@media (max-width: 720px) {
    .nlp-hero,
    .nlp-mini-hero { background-position: 88% center; background-size: cover; }
    .nlp-intro { padding-top: 80px; }
    .nlp-intro h1 { font-size: clamp(4rem, 22vw, 6.5rem); }
    .nlp-main { gap: 65px; grid-template-columns: 1fr; padding: 75px 20px; }
    .ai-paths { grid-template-columns: 1fr; }
    .current-ai-note { padding: 52px 28px 42px; }
    .why-note { padding: 45px 28px 35px; }
    .article-index { padding: 60px 18px 75px; }
    .article-slip { gap: 8px; grid-template-columns: 1fr auto; padding: 20px; }
    .article-slip:nth-child(n) { transform: rotate(-.35deg); }
    .article-slip:nth-child(even) { transform: rotate(.35deg); }
    .article-series { margin-left: 0; margin-right: 0; padding: 0 14px 20px; }
    .series-tab { align-items: start; flex-direction: column; gap: 4px; }
    .article-series .article-slip:nth-child(n) {
        gap: 7px;
        grid-template-columns: minmax(0, 1fr) 24px;
        padding: 18px;
    }
    .article-series .article-slip time { grid-column: 1 / -1; }
    .article-series .article-slip span { grid-column: 1; }
    .article-series .article-slip b { grid-column: 2; }
    .article-slip time { grid-column: 1 / -1; }
    .nlp-footer { gap: 25px; padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .nlp-page * { transition: none !important; }
}