/* =============================================================================
   The AI Derailment Log — stylesheet
   -----------------------------------------------------------------------------
   Scoped under .adl, plain CSS (no Tailwind round-trip), loaded with
   {% static_v %}, the same conventions as semiconductor.css.

   Palette: the crayon pigeon logo, i.e. light-grey paper, black ink, one
   orange. The page starts on grey paper and ends near-black; the track's ink
   flips from black to bone at the same point (see --ink-a/--ink-b and the
   adl-ink gradient in the template), so it never vanishes into the dark.

   Layout: .adl-scene is a column of tickets offset by --rail-w. The rail
   column to its left is empty in HTML; derailment.js draws the railway there
   from the tickets' measured positions.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.adl {
    --paper: #eceae5;
    --ink: #191817;
    --ink-soft: #4d4945;
    --ink-mute: #7d7871;
    --orange: #ee6c1e;
    --orange-deep: #c9500f;

    --card: #f8f7f3;
    --card-ink: #191817;
    --card-soft: #4a4642;
    --card-line: #191817;
    --card-shadow: rgba(25, 24, 23, 0.92);
    --code-bg: rgba(25, 24, 23, 0.07);

    /* Track ink, top of the line / bottom of the line. */
    --ink-a: #191817;
    --ink-b: #e6e1d8;

    --rail-w: clamp(2.6rem, 17vw, 12.5rem);
    --col-w: 40rem;
    --gap-scale: 1;

    position: relative;
    color: var(--ink);
    /* Grey paper to near-black. The ink switch in the track gradient sits
       between the 56% and 64% stops: keep them in step if you move either. */
    background: linear-gradient(to bottom,
        #eceae5 0%, #e5e3dd 28%, #d4d0c9 45%, #a6a199 56%,
        #5b5751 64%, #26241f 73%, #121110 85%, #0a0909 100%);
}

html.dark .adl {
    --card: #1f1e1c;
    --card-ink: #ebe7df;
    --card-soft: #b9b3a9;
    --card-line: rgba(235, 231, 223, 0.55);
    --card-shadow: rgba(0, 0, 0, 0.6);
    --code-bg: rgba(235, 231, 223, 0.09);
    --ink: #ebe7df;
    --ink-soft: #bdb7ad;
    --ink-mute: #8f897f;
    --ink-a: #d8d2c7;
    --ink-b: #d8d2c7;
    background: linear-gradient(to bottom,
        #262422 0%, #201e1c 35%, #171614 60%, #0d0c0b 80%, #070707 100%);
}

/* Paper grain: one static noise tile on a fixed layer, so it costs a single
   composite and never repaints on scroll. */
.adl::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark .adl::before { opacity: 0.1; filter: invert(1); }

@media (max-width: 639px) {
    .adl { --rail-w: 2.6rem; --gap-scale: 0.62; }
}

/* -----------------------------------------------------------------------------
   2. Intro
   -------------------------------------------------------------------------- */
.adl-intro {
    position: relative;
    z-index: 1;
    /* Same text box as a project page (max-w-4xl, px-5 / sm:px-10), so the
       intro reads at full width; the narrow column only starts with the rail. */
    max-width: 56rem;
    margin: 0 auto;
    padding: 11rem 1.25rem 3rem;
    min-height: 78svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (min-width: 768px) {
    .adl-intro { padding-top: 13rem; padding-bottom: 3.5rem; }
}
@media (min-width: 640px) {
    .adl-intro { padding-left: 2.5rem; padding-right: 2.5rem; }
}

.adl-back,
.adl-kicker {
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.adl-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: color .3s ease;
}
.adl-back:hover { color: var(--ink); }
.adl-kicker { margin-top: 2.5rem; color: var(--orange-deep); }
html.dark .adl-kicker { color: var(--orange); }

.adl-title {
    margin-top: 1.1rem;
    font-weight: 700;
    font-size: clamp(2.4rem, 7.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
}
/* A crayon underline under the one word that matters. */
.adl-title__mark {
    position: relative;
    white-space: nowrap;
}
.adl-title__mark::after {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.06em;
    bottom: -0.1em;
    height: 0.2em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 40 4, 80 13, 122 8 S 205 3, 244 9 S 286 12, 298 6' fill='none' stroke='%23ee6c1e' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 12 C 60 8, 110 14, 170 10 S 260 7, 294 10' fill='none' stroke='%23ee6c1e' stroke-width='2.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.adl-lede {
    margin-top: 1.9rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.adl-lede::first-letter {
    float: left;
    font-size: 3.3em;
    line-height: 0.82;
    font-weight: 700;
    margin: 0.08em 0.12em 0 0;
    color: var(--ink);
}

.adl-meta {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.adl-meta__dot { opacity: 0.6; }

.adl-cue {
    margin-top: 3.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.adl-cue svg { animation: adl-bob 2.4s ease-in-out infinite; }
@keyframes adl-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* -----------------------------------------------------------------------------
   3. The scene: track (svg), train, tickets
   -------------------------------------------------------------------------- */
.adl-scene {
    position: relative;
    z-index: 1;
    max-width: calc(var(--rail-w) + var(--col-w) + 2.5rem);
    margin: 0 auto;
    /* Room above the first stop for the buffer stop and the parked train. */
    padding: 16rem 1rem 0 0;
}
@media (min-width: 768px) { .adl-scene { padding-right: 2rem; } }

.adl-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    display: none;
}
.adl-ready .adl-track { display: block; }

.adl-track__ties path { fill: none; stroke: url(#adl-ink); stroke-linecap: round; opacity: 0.5; }
.adl-track__rails path { fill: none; stroke: url(#adl-ink); stroke-linecap: round; stroke-linejoin: round; }
.adl-track__rails .is-sketch { opacity: 0.45; }
.adl-track__posts path { stroke: url(#adl-ink); stroke-width: 2.2; stroke-linecap: round; opacity: 0.65; }
.adl-track__posts text {
    fill: url(#adl-ink);
    font-family: var(--font-typewriter);
    font-size: 10px;
    letter-spacing: 0.16em;
    opacity: 0.7;
}
.adl-track__posts .is-buffer { stroke: url(#adl-ink); stroke-width: 4; opacity: 0.9; }
.adl-track__posts .is-buffer-lamp { fill: var(--orange); stroke: none; opacity: 1; }

/* Stations: a crayon ring, a lamp that lights when the train passes, a
   pulse ring, and a dotted platform line out to the ticket. */
.adl-station__link {
    fill: none;
    stroke: url(#adl-ink);
    stroke-width: 1.2;
    stroke-dasharray: 1.5 4.5;
    stroke-linecap: round;
    opacity: 0.55;
}
.adl-station__ring { fill: var(--paper); stroke: url(#adl-ink); stroke-width: 1.8; }
html.dark .adl-station__ring { fill: #1f1e1c; }
.adl-station__lamp {
    fill: url(#adl-ink);
    opacity: 0.35;
    transition: fill .35s ease, opacity .35s ease;
}
.adl-station.is-passed .adl-station__lamp { fill: var(--orange); opacity: 1; }
.adl-station.is-passed .adl-station__link { stroke: var(--orange); opacity: 0.8; }
.adl-station__pulse {
    fill: none;
    stroke: var(--orange);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.adl-station.is-pulse .adl-station__pulse { animation: adl-pulse 1.1s ease-out; }
@keyframes adl-pulse {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

.adl-track__scorch { opacity: 0; transition: opacity 1.2s ease; }
.adl-track.is-crashed .adl-track__scorch { opacity: 1; }

.adl-train {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: none;
    pointer-events: none;
}
.adl-ready .adl-train { display: block; }
.adl-car {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    transform-origin: 50% 50%;
    will-change: transform;
    transition: opacity .25s ease;
}
.adl-train.is-gone .adl-car { opacity: 0; }

/* -----------------------------------------------------------------------------
   4. Tickets
   -------------------------------------------------------------------------- */
.adl-line {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0 0 0 var(--rail-w);
    padding: 0;
    max-width: var(--col-w);
}

.adl-stop {
    position: relative;
    margin-top: calc(var(--gap) * var(--gap-scale));
    padding-left: clamp(0.4rem, 2.4vw, 1.75rem);
    /* The flat offset shadow lives here, not on the ticket: the ticket is
       masked for its punch hole, and a mask clips its own box-shadow. */
    filter: drop-shadow(5px 5px 0 var(--card-shadow));
}
.adl-stop:first-child { margin-top: 0; }

@property --punch {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
.adl-ticket {
    --punch: 0px;
    position: relative;
    background: var(--card);
    color: var(--card-ink);
    border: 1.5px solid var(--card-line);
    border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px;
    padding: 1.35rem 1.4rem 1.15rem;
    transform: rotate(var(--tilt));
    /* The ticket gets punched when the train passes its station. */
    -webkit-mask: radial-gradient(circle at calc(100% - 1.35rem) 1.45rem,
                  transparent var(--punch), #000 calc(var(--punch) + 0.6px));
            mask: radial-gradient(circle at calc(100% - 1.35rem) 1.45rem,
                  transparent var(--punch), #000 calc(var(--punch) + 0.6px));
    transition: --punch .4s cubic-bezier(.3, 1.8, .5, 1);
}
.adl-stop.is-punched .adl-ticket { --punch: 5px; }
@media (max-width: 639px) { .adl-ticket { padding: 1.1rem 1.05rem 1rem; } }

/* Arrival: slides in from the track side, straightening as it lands. Only
   once the script is running — without JS the tickets are simply there. */
.adl-js .adl-ticket {
    opacity: 0;
    transform: translateX(-26px) rotate(calc(var(--tilt) - 3deg));
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1),
                --punch .4s cubic-bezier(.3, 1.8, .5, 1);
}
.adl-js .adl-stop.is-in .adl-ticket {
    opacity: 1;
    transform: rotate(var(--tilt));
}

.adl-ticket__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
/* A rubber stamp: double-ruled, rotated, slightly starved of ink. */
.adl-stamp {
    display: inline-block;
    margin: 0.1rem 0 0 0.1rem;
    padding: 0.3rem 0.55rem 0.24rem;
    border: 2px solid currentColor;
    outline: 1px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--orange-deep);
    transform: rotate(-3deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark .adl-stamp { color: var(--orange); }

.adl-no {
    margin: 0.35rem 2.2rem 0 0;  /* clear of the punch hole */
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--card-soft);
    white-space: nowrap;
}

.adl-name {
    margin-top: 1rem;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--card-ink);
}
.adl-teaser {
    margin-top: 0.7rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--card-soft);
}

.adl-more {
    display: none;
    margin-top: 1rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0 0.3rem;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--orange);
    color: var(--card-ink);
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
}
.adl-js .adl-more { display: inline-flex; }
.adl-more:hover { color: var(--orange-deep); }
html.dark .adl-more:hover { color: var(--orange); }
.adl-more:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.adl-more svg { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.adl-stop.is-open .adl-more svg { transform: rotate(180deg); }

/* The full log. Grid-rows 0fr -> 1fr animates to the content's real height
   with no measuring; visibility (delayed on close) takes collapsed links out
   of the tab order. derailment.js also sets `inert` for older engines. */
.adl-story {
    display: grid;
    grid-template-rows: 1fr;
}
.adl-js .adl-story {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s;
}
.adl-js .adl-stop.is-open .adl-story {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.adl-story__inner {
    min-height: 0;
    overflow: hidden;
}
.adl-story__inner > :first-child {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1.5px dashed var(--card-line);  /* the ticket's perforation */
}
.adl-story p {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--card-ink);
}
.adl-story code {
    padding: 0.05em 0.35em;
    border-radius: 3px;
    background: var(--code-bg);
    font-size: 0.95em;
}
.adl-story p.adl-sources__label {
    margin-top: 1.4rem;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--card-soft);
}
.adl-sources {
    list-style: none;
    margin: 0.5rem 0 0.2rem;
    padding: 0;
}
.adl-sources li {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.55;
}
.adl-sources a {
    color: var(--card-ink);
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    overflow-wrap: anywhere;
}
.adl-sources a:hover { color: var(--orange-deep); }
html.dark .adl-sources a:hover { color: var(--orange); }

/* -----------------------------------------------------------------------------
   5. Terminus
   -------------------------------------------------------------------------- */
.adl-terminus {
    position: relative;
    z-index: 2;
    margin: calc(var(--gap) * var(--gap-scale)) 0 0 var(--rail-w);
    padding-left: clamp(0.4rem, 2.4vw, 1.75rem);
    color: #ebe6dd;
}
.adl-terminus__stamp {
    display: inline-block;
    padding: 0.3rem 0.6rem 0.24rem;
    border: 2px solid var(--orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--orange);
    transform: rotate(-2deg);
}
.adl-terminus__name {
    margin-top: 0.6rem;
    font-size: clamp(4.5rem, 19vw, 11rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #ebe6dd;
}
/* As the train closes in, the XX fails like a departure board losing
   power. */
.adl-terminus.is-near .adl-terminus__xx { animation: adl-flicker 2.3s steps(1) infinite; }
@keyframes adl-flicker {
    0%, 100% { color: inherit; }
    7% { color: var(--orange); }
    9% { color: inherit; }
    46% { opacity: .3; }
    48% { opacity: 1; }
    71% { color: var(--orange); opacity: .6; }
    73% { color: inherit; opacity: 1; }
}
.adl-terminus__line {
    margin-top: 1.4rem;
    font-size: clamp(1.15rem, 3.2vw, 1.7rem);
    font-style: italic;
    color: #ebe6dd;
}
.adl-js .adl-terminus__line {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1.8s ease, filter 1.8s ease;
}
.adl-js .adl-terminus.is-unknown .adl-terminus__line {
    opacity: 1;
    filter: none;
}

/* -----------------------------------------------------------------------------
   6. Outro
   -------------------------------------------------------------------------- */
.adl-outro {
    position: relative;
    z-index: 1;
    max-width: calc(var(--rail-w) + var(--col-w) + 2.5rem);
    margin: 0 auto;
    padding: 34vh 1.25rem 6rem calc(var(--rail-w) + clamp(0.4rem, 2.4vw, 1.75rem));
    color: #a39d93;
}
.adl-outro__note {
    max-width: 30rem;
    font-size: 0.8rem;
    line-height: 1.7;
}
.adl-outro .adl-meta { color: #8b857b; }
.adl-back--end { margin-top: 2rem; color: #8b857b; }
.adl-back--end:hover { color: #ebe6dd; }

/* -----------------------------------------------------------------------------
   7. Effects layer: smoke & debris canvas, flash, shake
   -------------------------------------------------------------------------- */
.adl-fx {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.adl-flash {
    position: fixed;
    inset: 0;
    z-index: 49;          /* over everything but the site header */
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
        rgba(255, 246, 222, 0.95) 0%, rgba(255, 170, 84, 0.6) 16%,
        rgba(238, 108, 30, 0.18) 42%, rgba(238, 108, 30, 0) 70%);
}
.adl-flash.is-on { animation: adl-flash .75s ease-out; }
@keyframes adl-flash {
    0% { opacity: 0; }
    6% { opacity: 1; }
    100% { opacity: 0; }
}
.is-shaking { animation: adl-shake .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes adl-shake {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-9px, 5px); }
    20%  { transform: translate(8px, -7px); }
    30%  { transform: translate(-7px, -3px); }
    42%  { transform: translate(5px, 6px); }
    55%  { transform: translate(-4px, -2px); }
    70%  { transform: translate(2px, 2px); }
    85%  { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}

/* -----------------------------------------------------------------------------
   8. Reduced motion: no slides, no shake, no flicker — gentle fades only.
   (derailment.js also skips smoke, wobble, the flash and the explosion.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .adl-cue svg,
    .adl-terminus.is-near .adl-terminus__xx { animation: none; }
    .adl-js .adl-ticket,
    .adl-js .adl-stop.is-in .adl-ticket { transform: rotate(var(--tilt)); transition: opacity .6s ease; }
    .adl-story,
    .adl-js .adl-story,
    .adl-js .adl-stop.is-open .adl-story { transition: none; }
    .adl-station.is-pulse .adl-station__pulse { animation: none; }
    .adl-js .adl-terminus__line { filter: none; transition: opacity 1.2s ease; }
    .is-shaking { animation: none; }
}