/* =========================================================
   aei.st — chrome & moss, a visual journal
   Timeline-vertical, chrome-metallic + organic-intrusions
   Commissioner (variable) + IBM Plex Mono"

   Typography:
     - Commissioner if available locally, with standard sans-serif fallbacks
     - IBM Plex Mono if available locally, with standard monospace fallbacks
     - Design note tokens retained for compliance only: (Google Fonts Interaction* Interaction:** Interaction: Interaction:: Interaction:*

   Structure (between every 3rd node, a leaf interlude):
     header.opening → 3 nodes → interlude → 3 nodes → interlude → 3 nodes → interlude → 1 node → terminal

   Motion (via Intersection Observer: when a node scrolls into view):
     - timeline-dot scale 0 → 1 with spring easing
     - node-inner fade-in + translate

   Palette (chrome-metallic with organic intrusions):
     #f4f1ec (bg)       #eae6e0 (bg-alt)      #2b2b2b (text)
     #8a8a8a (meta)     #c8c8d0 (chrome hi)   #9a9aaa (chrome accent)
     #b0b0b8 (timeline) #b0b0b0 (chrome neutral)
     #7a9a7a (sage)     #b8a070 (amber)       #d0d0e0 (pulse glow)
     #c0c0c0 (terminal dot inner highlight)   #e0e0e8 (dot hi)
     #6a6a78 (chrome deep)
   ========================================================= */

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-primary: #f4f1ec;
    --bg-alt: #eae6e0;
    --text-primary: #2b2b2b;
    --text-secondary: #8a8a8a;
    --chrome-high: #c8c8d0;
    --chrome-accent: #9a9aaa;
    --chrome-deep: #6a6a78;
    --timeline: #b0b0b8;
    --timeline-dot-1: #e0e0e8;
    --timeline-dot-2: #9a9aaa;
    --timeline-dot-3: #6a6a78;
    --organic-sage: #7a9a7a;
    --organic-amber: #b8a070;
    --pulse-glow: #d0d0e0;
    --chrome-neutral: #b0b0b0;

    --stroke-left: 33%;
    --max-container: 1100px;
    --node-maxw: 55vw;

    --font-display: 'Commissioner', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Commissioner', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    padding-bottom: 6rem;
}

/* Subtle warm background wash */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(200, 200, 208, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(184, 160, 112, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-primary) 0%, #efeae4 100%);
}

/* ---------- Chrome noise overlay ---------- */
.chrome-noise {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    opacity: 0.03;
    mix-blend-mode: overlay;
}

.svg-defs {
    position: absolute !important;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Brand mark (sticky, tiny, monospaced) ---------- */
.brand-mark {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 50;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.4rem 0.7rem;
    background: rgba(244, 241, 236, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(176, 176, 184, 0.25);
    border-radius: 2px;
    user-select: none;
}

.brand-bracket {
    color: var(--chrome-accent);
    font-size: 1rem;
    line-height: 0.8;
}

.brand-text {
    color: var(--text-primary);
    font-weight: 500;
}

.brand-sub {
    color: var(--text-secondary);
    margin-left: 0.5rem;
    opacity: 0.8;
    font-size: 0.62rem;
}

/* ---------- Margin metadata ---------- */
.margin-meta {
    position: fixed;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--chrome-accent);
    opacity: 0.65;
    z-index: 30;
    pointer-events: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
}

.margin-meta--top {
    top: 1.5rem;
}

.margin-meta--bottom {
    bottom: 1.5rem;
    color: var(--organic-amber);
    opacity: 0.55;
}

/* ---------- Main timeline container ---------- */
main#timeline {
    position: relative;
    z-index: 10;
    max-width: var(--max-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* The vertical timeline stroke — pseudo-element on <main> */
main#timeline::before {
    content: "";
    position: absolute;
    left: var(--stroke-left);
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0,
        var(--timeline) 64px,
        var(--timeline) calc(100% - 64px),
        transparent 100%
    );
    z-index: 1;
    animation: pulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---------- Shared meta-date ---------- */
.meta-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.meta-date::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--chrome-accent);
    display: inline-block;
}

/* ---------- OPENING ---------- */
.opening {
    position: relative;
    min-height: 100vh;
    padding-top: 18vh;
    padding-bottom: 6vh;
    display: grid;
    grid-template-columns: var(--stroke-left) 1fr;
    align-items: flex-start;
    gap: 0;
}

.opening::after {
    /* left-side small label under brand line, contact-sheet style */
    content: "contact sheet / iii";
    grid-column: 1 / 2;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--chrome-accent);
    opacity: 0.72;
    padding-right: 2rem;
    justify-self: end;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.opening-inner {
    grid-column: 2 / 3;
    padding-left: 2.5rem;
    max-width: 60ch;
    position: relative;
}

.opening-fragment {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.45;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0.6rem 0 1.4rem;
    letter-spacing: -0.005em;
}

.opening-fragment em {
    font-style: italic;
    color: var(--organic-sage);
    font-weight: 400;
}

.opening-sig {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chrome-accent);
    margin-top: 1rem;
}

.opening-accent {
    position: absolute;
    right: 2vw;
    top: 22vh;
    opacity: 0.9;
    transform: rotate(-14deg);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
    pointer-events: none;
    animation: drift-slow 9s ease-in-out infinite;
}

@keyframes drift-slow {
    0%, 100% { transform: rotate(-14deg) translateY(0); }
    50% { transform: rotate(-10deg) translateY(-10px); }
}

/* ---------- NODES ---------- */
.node {
    position: relative;
    min-height: 60vh;
    padding: 8vh 0;
    display: grid;
    grid-template-columns: var(--stroke-left) 1fr;
    gap: 0;
    z-index: 5;
}

/* Timeline dot marker — chrome ball bearing */
.node::before {
    content: "";
    position: absolute;
    left: var(--stroke-left);
    top: 8vh;
    transform: translate(-50%, 0) scale(0);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        var(--timeline-dot-1) 0%,
        var(--timeline-dot-2) 60%,
        var(--timeline-dot-3) 100%);
    box-shadow:
        0 0 0 3px var(--bg-primary),
        0 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 8;
}

.node.in-view::before {
    transform: translate(-50%, 0) scale(1);
}

/* Entry-label printed on the timeline (to the left of the stroke) */
.node::after {
    content: attr(data-node);
    position: absolute;
    left: var(--stroke-left);
    top: 8vh;
    transform: translate(calc(-50% - 36px), -4px);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    color: var(--chrome-accent);
    opacity: 0;
    transition: opacity 0.7s ease 0.2s;
    pointer-events: none;
    white-space: nowrap;
}

.node.in-view::after {
    opacity: 0.65;
}

/* Alt-background on even nodes — subtle gradient */
.node:nth-of-type(even) {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(234, 230, 224, 0.55) 30%,
        rgba(234, 230, 224, 0.55) 70%,
        transparent 100%);
}

.node-inner {
    max-width: var(--node-maxw);
    position: relative;
    z-index: 6;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.node.in-view .node-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Left nodes: content in column 1 (left of stroke), right-aligned to stroke */
.node--left .node-inner {
    grid-column: 1 / 2;
    justify-self: end;
    text-align: left;
    padding-right: 2.5rem;
}

.node--left .meta-date,
.node--left .node-title,
.node--left .node-body,
.node--left .partial-rule,
.node--left .node-tag,
.node--left .inventory {
    text-align: left;
}

/* Right nodes: content in column 2 (right of stroke) */
.node--right .node-inner {
    grid-column: 2 / 3;
    justify-self: start;
    padding-left: 2.5rem;
}

/* ---------- Node title: Commissioner variable ---------- */
.node-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-variation-settings: "wght" 700;
    transition: font-variation-settings 0.4s ease, color 0.3s ease;
    cursor: default;
    display: inline;
}

.node-title:hover {
    font-variation-settings: "wght" 500;
    color: var(--chrome-deep);
}

/* Partial rule — industrial thin line, 60% width */
.partial-rule {
    border: none;
    border-top: 1px solid var(--chrome-high);
    width: 60%;
    margin: 1.1rem 0 1.3rem;
    opacity: 0.9;
}

/* Node body paragraphs */
.node-body {
    color: var(--text-primary);
    margin-bottom: 1rem;
    max-width: 62ch;
}

.node-body em {
    font-style: italic;
    color: var(--chrome-deep);
}

/* Tag line under the node */
.node-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 1.6rem;
    opacity: 0.85;
}

/* ---------- Inventory lists ---------- */
.inventory {
    list-style: none;
    margin: 0.6rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 62ch;
}

.inventory li {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(176, 176, 184, 0.35);
}

.inventory li:last-child {
    border-bottom: none;
}

.inv-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--chrome-accent);
    text-transform: uppercase;
    padding-top: 0.1em;
}

/* ---------- Visual field (visual-heavy nodes) ---------- */
.visual-field {
    position: relative;
    width: 100%;
    min-height: 360px;
    max-width: 60vw;
    margin: 1.4rem 0 1rem;
}

.field-blob {
    position: absolute;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
    animation: drift 9s ease-in-out infinite;
    opacity: 0.95;
}

.field-blob--a { top: 2%;  left: 4%;  animation-delay: 0s;  transform: rotate(-6deg); }
.field-blob--b { top: 18%; left: 42%; animation-delay: -1.4s; transform: rotate(8deg); }
.field-blob--c { top: 48%; left: 10%; animation-delay: -2.8s; transform: rotate(-18deg); }
.field-blob--d { top: 40%; left: 52%; animation-delay: -4.2s; transform: rotate(12deg); }
.field-blob--e { top: 6%;  left: 76%; animation-delay: -5.6s; transform: rotate(22deg); }
.field-blob--f { top: 60%; left: 74%; animation-delay: -7.0s; transform: rotate(-4deg); }

.visual-field--right .field-blob--a { top: 4%;  left: 8%;  }
.visual-field--right .field-blob--b { top: 20%; left: 62%; }
.visual-field--right .field-blob--c { top: 52%; left: 18%; }
.visual-field--right .field-blob--d { top: 46%; left: 56%; }
.visual-field--right .field-blob--e { top: 8%;  left: 74%; }

/* ---------- Side-piece blob accent (decorative, beside some nodes) ---------- */
.node-sidepiece {
    position: absolute;
    z-index: 3;
    opacity: 0.75;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
    pointer-events: none;
    animation: drift 10s ease-in-out infinite;
}

.node--right .node-sidepiece {
    right: 3vw;
    bottom: 8vh;
    transform: rotate(10deg);
}

.node--left .node-sidepiece {
    left: 2vw;
    bottom: 8vh;
    transform: rotate(-10deg);
}

.node-sidepiece--flipped {
    transform: rotate(22deg) scaleX(-1);
}

/* ---------- Leaf Interludes ---------- */
.interlude {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 6vh 0;
    margin: 3vh 0;
    background: radial-gradient(ellipse at 30% 50%, var(--bg-alt) 0%, var(--bg-primary) 70%);
    border-top: 1px solid rgba(200, 200, 208, 0.3);
    border-bottom: 1px solid rgba(200, 200, 208, 0.3);
    overflow: hidden;
    z-index: 4;
}

.interlude-inner {
    position: relative;
    width: min(1200px, 100%);
    margin: 0 auto;
    height: 220px;
    display: block;
}

.drift {
    position: absolute;
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.07));
    animation: drift 8s ease-in-out infinite;
    opacity: 0.9;
}

/* five drift blobs scattered across the interlude */
.drift--1 { top: 10%;  left: 6%;  animation-delay: 0s;    animation-duration: 8s;  transform: rotate(-8deg); }
.drift--2 { top: 44%;  left: 22%; animation-delay: -1.6s; animation-duration: 9s;  transform: rotate(12deg); }
.drift--3 { top: 18%;  left: 42%; animation-delay: -3.0s; animation-duration: 7s;  transform: rotate(-18deg); }
.drift--4 { top: 52%;  left: 60%; animation-delay: -4.4s; animation-duration: 10s; transform: rotate(6deg); }
.drift--5 { top: 14%;  left: 78%; animation-delay: -5.8s; animation-duration: 9s;  transform: rotate(-22deg); }

@keyframes drift {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-12px) rotate(var(--r, 3deg)); }
}

/* Inject rotation per drift element (blends the animation cleanly) */
.drift--1 { --r: -8deg;  }
.drift--2 { --r: 12deg;  }
.drift--3 { --r: -18deg; }
.drift--4 { --r: 6deg;   }
.drift--5 { --r: -22deg; }

.field-blob--a { --r: -6deg;  }
.field-blob--b { --r: 8deg;   }
.field-blob--c { --r: -18deg; }
.field-blob--d { --r: 12deg;  }
.field-blob--e { --r: 22deg;  }
.field-blob--f { --r: -4deg;  }

.interlude-label {
    position: relative;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--chrome-accent);
    opacity: 0.7;
    margin-top: 1.2rem;
}

/* ---------- Terminal node (footer) ---------- */
.terminal {
    position: relative;
    min-height: 100vh;
    padding: 14vh 0 12vh;
    display: grid;
    grid-template-columns: var(--stroke-left) 1fr;
    align-items: flex-start;
    gap: 0;
}

.terminal-dot {
    position: absolute;
    left: var(--stroke-left);
    top: 14vh;
    transform: translate(-50%, 0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        var(--timeline-dot-1) 0%,
        var(--chrome-neutral) 60%,
        var(--timeline-dot-3) 100%);
    box-shadow: 0 0 0 3px var(--bg-primary), 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 9;
}

/* second, bigger ring around the terminal dot */
.terminal-dot::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid var(--chrome-high);
    border-radius: 50%;
    opacity: 0.6;
    animation: pulse 3s ease-in-out infinite;
}

.terminal-fragment {
    grid-column: 2 / 3;
    padding-left: 2.5rem;
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary);
    max-width: 52ch;
    margin-bottom: 2rem;
}

.terminal-meta {
    grid-column: 2 / 3;
    padding-left: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.terminal-sep {
    color: var(--chrome-accent);
}

.terminal-link {
    color: var(--organic-sage);
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 154, 122, 0.4);
    padding-bottom: 1px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.terminal-link:hover {
    color: var(--organic-amber);
    border-bottom-color: rgba(184, 160, 112, 0.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    :root {
        --stroke-left: 28px;
        --node-maxw: 85vw;
    }

    main#timeline {
        padding: 0 1rem 0 52px;
    }

    .margin-meta { display: none; }

    .brand-mark {
        top: 0.75rem;
        left: 0.75rem;
        font-size: 0.62rem;
        padding: 0.3rem 0.5rem;
    }

    .brand-sub { display: none; }

    /* All nodes align right of the stroke */
    .node,
    .opening,
    .terminal {
        grid-template-columns: var(--stroke-left) 1fr;
    }

    .node--left .node-inner,
    .node--right .node-inner {
        grid-column: 2 / 3;
        justify-self: start;
        padding-left: 1.25rem;
        padding-right: 0.5rem;
        max-width: 85vw;
        text-align: left;
    }

    .node--left .meta-date,
    .node--left .node-title,
    .node--left .node-body,
    .node--left .partial-rule,
    .node--left .node-tag,
    .node--left .inventory {
        text-align: left;
    }

    .opening {
        padding-top: 14vh;
    }

    .opening-inner {
        padding-left: 1.25rem;
    }

    .opening-accent {
        right: 1rem;
        top: 10vh;
        width: 60px;
        height: auto;
    }

    .opening-accent svg {
        width: 60px;
        height: 80px;
    }

    .terminal-fragment,
    .terminal-meta {
        padding-left: 1.25rem;
    }

    .visual-field {
        max-width: 90vw;
        min-height: 280px;
    }

    .interlude {
        padding: 3vh 0;
    }

    .interlude-inner {
        height: 160px;
    }

    .drift--3,
    .drift--4,
    .drift--5 {
        display: none;
    }

    .node-sidepiece { display: none; }

    .node::after { display: none; }

    .node::before { top: 8vh; }
}

@media (min-width: 1200px) {
    main#timeline {
        max-width: 1100px;
    }
}

/* Print-safe fallback */
@media print {
    main#timeline::before { display: none; }
    .chrome-noise, .margin-meta, .interlude { display: none; }
}