/* ============================================================
   haskeller.net  -- a small notebook about thinking in lambda
   Palette: parchment reading room
   ============================================================ */

:root {
    --bg:        #F4EFE6;  /* parchment */
    --ink:       #1B1A17;  /* iron-gall ink */
    --deep-ink:  #0E0D0B;  /* deep ink (hover, topbar) */
    --sepia:     #6E5B3A;  /* faded annotation */
    --vermilion: #A8331C;  /* rubric / type variables / QED */
    --moss:      #3F5D4F;  /* intuition / reduction arrows */
    --shadow:    #D9D0BE;  /* paper shadow / column rules / code bg */

    --serif-display: 'Fraunces', 'Lora', Georgia, serif;
    --serif-body:    'Newsreader', 'Lora', Georgia, serif;
    --mono:          'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
    --hand:          'Caveat', 'Comic Sans MS', cursive;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --col: 1fr;
    --measure: 62ch;
    --rail-w: 64px;
    --topbar-h: 96px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif-body);
    font-size: 18px;
    line-height: 1.65;
    font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

a { color: var(--ink); text-decoration: none; transition: color 600ms var(--ease); }
a:hover { color: var(--deep-ink); }
em { font-style: italic; }
strong { font-weight: 600; color: var(--ink); }

code, .mono { font-family: var(--mono); font-feature-settings: 'liga' 1, 'calt' 1; }

/* ============================================================
   Paper grain texture layer
   ============================================================ */
.paper-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* ============================================================
   Top proof-bar
   ============================================================ */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: linear-gradient(to bottom, var(--bg) 70%, rgba(244, 239, 230, 0));
    padding: 14px 36px 18px 36px;
    pointer-events: none;
}
.topbar-inner, .proofbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    pointer-events: auto;
}
.topbar-inner { margin-bottom: 6px; }
.sitemark {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--deep-ink);
    font-variation-settings: 'opsz' 14, 'SOFT' 50;
}
.lambda-mark {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--vermilion);
    margin-right: 0.2em;
    font-weight: 700;
}
.t-toggle {
    background: transparent;
    border: 1px solid var(--sepia);
    color: var(--sepia);
    padding: 4px 12px;
    font-family: var(--mono);
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 0;
    transition: all 700ms var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.t-toggle:hover {
    color: var(--vermilion);
    border-color: var(--vermilion);
}
.t-toggle .t-glyph {
    color: var(--vermilion);
    font-weight: 600;
}
.t-toggle .t-label {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink);
}
body[data-mode="type"] .t-toggle {
    color: var(--vermilion);
    border-color: var(--vermilion);
}
body[data-mode="type"] .t-toggle .t-label::before {
    content: 'prose mode';
}
body[data-mode="type"] .t-toggle .t-label {
    visibility: hidden;
    position: relative;
}
body[data-mode="type"] .t-toggle .t-label::before {
    visibility: visible;
    position: absolute;
    left: 0;
    font-style: italic;
}

.proofbar {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--sepia);
    align-items: center;
    gap: 18px;
}
.proofbar-premises { display: flex; align-items: center; gap: 6px; }
.proofbar-premises a {
    color: var(--sepia);
    padding: 0 4px;
    transition: color 600ms var(--ease);
}
.proofbar-premises a:hover { color: var(--vermilion); }
.proofbar-premises .dot { color: var(--shadow); }
.proofbar-rule {
    flex: 1;
    overflow: hidden;
    color: var(--shadow);
    letter-spacing: -0.06em;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}
.proofbar-conclusion {
    font-family: var(--serif-body);
    font-style: italic;
    color: var(--sepia);
    font-size: 0.85rem;
}
.proof-label {
    color: var(--vermilion);
    margin-right: 6px;
    font-family: var(--mono);
    font-style: normal;
}

/* ============================================================
   Folio rail (left edge)
   ============================================================ */
.folio-rail {
    position: fixed;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
}
.rail-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--shadow);
    transition: color 700ms var(--ease);
    line-height: 1;
}
.rail-lambda {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--shadow);
    transition: color 700ms var(--ease);
}
.rail-no {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--shadow);
    letter-spacing: 0.05em;
}
.rail-mark.is-active .rail-lambda,
.rail-mark.is-active .rail-no {
    color: var(--vermilion);
}
.rail-mark.is-passed .rail-lambda,
.rail-mark.is-passed .rail-no {
    color: var(--sepia);
}
.rail-mark:hover .rail-lambda,
.rail-mark:hover .rail-no {
    color: var(--ink);
}

/* ============================================================
   Manuscript container
   ============================================================ */
.manuscript {
    position: relative;
    z-index: 5;
    padding: var(--topbar-h) 0 0 0;
    max-width: 100%;
}

/* ============================================================
   Opening single-line viewport
   ============================================================ */
.opening {
    position: relative;
    min-height: 92vh;
    display: grid;
    place-items: center;
    padding: 8vh 8vw 4vh;
    overflow: hidden;
}
.opening-inner {
    max-width: 56ch;
    text-align: left;
    position: relative;
    z-index: 2;
}
.opening-line {
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0;
    font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.opening-lambda {
    font-style: italic;
    font-weight: 700;
    color: var(--vermilion);
    margin: 0 0.05em;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.opening-foot {
    margin-top: 3rem;
    font-family: var(--hand);
    font-size: 1.15rem;
    color: var(--sepia);
}
.opening-foot .caveat {
    transform: rotate(-2deg);
    display: inline-block;
}
.opening-margin-lambda {
    position: absolute;
    right: -2vw;
    top: 50%;
    transform: translateY(-50%) rotate(-3deg);
    font-family: var(--serif-display);
    font-weight: 1000;
    font-style: italic;
    color: var(--shadow);
    font-size: clamp(14rem, 32vw, 28rem);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    opacity: 0.85;
}

/* ============================================================
   Folio (article) layout
   ============================================================ */
.folio {
    position: relative;
    display: grid;
    grid-template-columns:
        [page-start] minmax(80px, 1fr)
        [body-start] minmax(0, 7fr)
        [body-end] minmax(80px, 5fr)
        [page-end];
    column-gap: 32px;
    padding: 14vh 7vw 12vh 7vw;
    border-top: 1px solid transparent;
}
.folio:nth-child(odd) {
    background:
        linear-gradient(to right, transparent calc(100% - 1px), var(--shadow) 100%) no-repeat,
        transparent;
    background-size: 60% 1px;
    background-position: 12% 14vh;
}

/* Folio head */
.folio-head {
    grid-column: body-start / body-end;
    position: relative;
}
.folio-proofbar {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    color: var(--sepia);
    font-size: 0.74rem;
    margin-bottom: 12px;
}
.folio-premises { letter-spacing: 0.05em; }
.folio-rule {
    flex: 1;
    overflow: hidden;
    color: var(--shadow);
    letter-spacing: -0.06em;
    white-space: nowrap;
}
.folio-gutter {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 18px;
}
.folio-numeral {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--vermilion);
    letter-spacing: 0.05em;
    font-variation-settings: 'opsz' 144, 'SOFT' 70;
}
.folio-typesig {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--sepia);
    letter-spacing: 0;
}
.folio-title {
    font-family: var(--serif-display);
    font-weight: 1000;
    font-style: normal;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0 0 2.4rem 0;
    color: var(--ink);
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.folio-title .title-line { display: block; }
.folio-title .title-line-2 {
    margin-left: 1.5em;
    font-style: italic;
    color: var(--ink);
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
.folio-epigraph {
    font-family: var(--hand);
    font-size: 1.35rem;
    color: var(--sepia);
    margin: 0 0 3rem 0;
    transform: rotate(-1.2deg);
    transform-origin: left center;
    line-height: 1.3;
    max-width: 48ch;
}
.folio-epigraph .epigraph-source {
    display: block;
    font-size: 1rem;
    color: var(--sepia);
    margin-top: 0.2rem;
    transform: rotate(0.6deg);
}

/* Folio body (prose column) */
.folio-body {
    grid-column: body-start / body-end;
    max-width: var(--measure);
}
.prose {
    font-family: var(--serif-body);
    font-size: 1.075rem;
    line-height: 1.7;
    margin: 0 0 1.4em 0;
    color: var(--ink);
    font-variation-settings: 'opsz' 16;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.prose.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.prose.intuition {
    font-style: italic;
    color: var(--moss);
    border-left: 1px solid var(--shadow);
    padding-left: 1.4rem;
    margin-left: -1.4rem;
}
.prose.intuition em { color: var(--moss); font-weight: 500; }
.prose .vermilion { color: var(--vermilion); font-family: var(--mono); }
.prose code.inline {
    font-family: var(--mono);
    background: var(--shadow);
    padding: 1px 6px;
    font-size: 0.92em;
    color: var(--ink);
    border-radius: 0;
    transition: background 600ms var(--ease);
    cursor: help;
}
.prose code.inline:hover {
    background: transparent;
    color: var(--vermilion);
}
.prose.closing {
    margin-top: 3rem;
    font-style: italic;
    color: var(--sepia);
}

/* Equational displays (full-width breakouts) */
.equational-display {
    grid-column: body-start / body-end;
    margin: 2.6rem 0;
    padding: 1.6rem 0;
    border-top: 1px solid var(--shadow);
    border-bottom: 1px solid var(--shadow);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--mono);
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.5;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.equational-display.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.equational-display .display-eq { font-size: 1.15rem; }
.equational-display .op {
    color: var(--vermilion);
    font-weight: 600;
    margin: 0 0.3em;
}
.equational-display .qed-inline {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--sepia);
}

/* Margin column */
.margin-column {
    grid-column: body-end / page-end;
    position: relative;
    padding-left: 18px;
    padding-top: 60px;
    pointer-events: none;
}
.margin-lambda {
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 1000;
    font-size: clamp(8rem, 14vw, 14rem);
    color: var(--shadow);
    line-height: 0.85;
    margin: 0;
    transition: transform 80ms linear, color 800ms var(--ease);
    transform-origin: 50% 80%;
    user-select: none;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    will-change: transform;
}
.reduction-graph {
    width: min(220px, 100%);
    height: 320px;
    margin-top: 12px;
    display: block;
}
.rg-term {
    font-family: var(--mono);
    font-size: 12px;
    fill: var(--ink);
}
.rg-arrow {
    fill: none;
    stroke: var(--moss);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1500ms var(--ease);
    marker-end: url(#arrowhead);
}
.reduction-graph.is-drawing .rg-arrow {
    stroke-dashoffset: 0;
}
.rg-label {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--vermilion);
    font-style: italic;
}
.margin-note {
    font-family: var(--hand);
    color: var(--sepia);
    font-size: 1.1rem;
    margin: 14px 0 0 8px;
    transform: rotate(-2deg);
    transform-origin: left center;
    line-height: 1.2;
}
.margin-note .dagger {
    color: var(--vermilion);
    margin-left: 4px;
    font-family: var(--serif-body);
}

/* Folio equation footer */
.folio-equation {
    grid-column: body-start / body-end;
    margin: 4rem 0 1.5rem 0;
    padding: 1.4rem 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--ink);
    border-top: 1px dashed var(--shadow);
    border-bottom: 1px dashed var(--shadow);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.folio-equation.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.folio-equation .vv { color: var(--vermilion); }
.folio-equation .op { color: var(--vermilion); font-weight: 600; margin: 0 0.25em; }
.folio-equation .qed {
    font-family: var(--serif-body);
    font-style: italic;
    color: var(--vermilion);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* Cellular automaton strip (section break ornament) */
.ca-strip {
    grid-column: body-start / page-end;
    width: 100%;
    height: 64px;
    margin: 4rem 0 0 0;
    display: block;
    overflow: visible;
}
.ca-strip-final { height: 96px; }
.ca-strip rect {
    opacity: 0;
    transition: opacity 200ms linear;
}
.ca-strip rect.on { opacity: 1; }

/* ============================================================
   Identifier hover signature (floating)
   ============================================================ */
.ident-sig {
    position: fixed;
    z-index: 99;
    font-family: var(--mono);
    color: var(--vermilion);
    font-size: 0.88rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
    background: var(--bg);
    padding: 2px 8px;
    border-left: 2px solid var(--vermilion);
    white-space: nowrap;
    max-width: 50ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ident-sig.is-shown {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Type-signature mode
   ============================================================ */
body[data-mode="type"] .prose {
    position: relative;
    overflow: hidden;
    transition: clip-path 600ms var(--ease), opacity 600ms var(--ease);
}
body[data-mode="type"] .prose .prose-text {
    display: none;
}
body[data-mode="type"] .prose .prose-sig {
    display: block;
}
.prose .prose-sig {
    display: none;
    font-family: var(--mono);
    font-size: 1.02rem;
    color: var(--vermilion);
    line-height: 1.5;
    padding: 0.5em 0;
    margin: 0;
}
.prose-text { display: block; }

/* ============================================================
   Colophon
   ============================================================ */
.colophon {
    position: relative;
    padding: 8vh 9vw 12vh 9vw;
    border-top: 1px solid var(--shadow);
    margin-top: 4rem;
}
.colophon-inner {
    max-width: 56ch;
    margin: 0 auto;
    text-align: center;
    color: var(--sepia);
    font-size: 0.95rem;
    line-height: 1.7;
}
.colophon-inner .caveat {
    font-family: var(--hand);
    font-size: 1.4rem;
    color: var(--vermilion);
    display: block;
    margin-bottom: 1rem;
    transform: rotate(-1.5deg);
}
.colophon-mark {
    margin-top: 2.5rem;
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 700;
    color: var(--vermilion);
    font-size: 2.2rem;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* ============================================================
   Caveat utility
   ============================================================ */
.caveat {
    font-family: var(--hand);
    color: var(--sepia);
    font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .folio {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 10vh 8vw 8vh 8vw;
    }
    .folio-head, .folio-body, .folio-equation, .equational-display, .ca-strip {
        grid-column: 1 / -1;
    }
    .margin-column {
        grid-column: 1 / -1;
        padding-left: 0;
        margin-top: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    .margin-lambda {
        font-size: 7rem;
    }
    .reduction-graph {
        height: 240px;
    }
    .opening-margin-lambda {
        font-size: 14rem;
        right: -8vw;
        opacity: 0.55;
    }
    .folio-rail { display: none; }
    .topbar { padding: 12px 18px 14px 18px; }
    .proofbar-rule { display: none; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .folio { padding: 8vh 6vw 6vh 6vw; }
    .folio-title { font-size: clamp(2.4rem, 11vw, 4rem); }
    .folio-title .title-line-2 { margin-left: 0.6em; }
    .opening { padding: 6vh 6vw 4vh; min-height: 80vh; }
    .opening-line { font-size: clamp(1.3rem, 6vw, 2rem); }
    .topbar-inner .t-toggle .t-label { display: none; }
    .equational-display { font-size: 0.95rem; }
    .folio-equation { font-size: 1rem; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .prose, .equational-display, .folio-equation {
        transition-duration: 350ms;
        transform: none;
    }
    .margin-lambda { transition: none; }
    .rg-arrow { transition-duration: 600ms; }
    html { scroll-behavior: auto; }
}