/* story.css — the why, before the what.

   The Open SDK page opens with the reason the SDK exists: a hero statement,
   a timeline of how restaurant sales moved online, and the choices a
   restaurant was left with. Only then does the page explain the toolkit.

   The modules sit inside the chapter grid from schematic.css (sticky
   heading left, body right) so the handoff rhythm is the same all the way
   down. They borrow its tokens: ink, label, edge. No new colour — the
   accents stay in the terminals, where green is the SDK's voice.

   Blocks:
     .hero       the opening statement, inside .intro so the title stays
                 parked through it on narrow screens
     .kicker     a small label above a statement
     .timeline   one rail, one dot per beat, year above headline above note
     .kit        two hairline lists: the channel itself, and the tools behind it
     .matrix     a hairline table: what each way of building one delivered
     .diagram    boxes in ink and hairline: codebases before and now, and
                 the anatomy of one restaurant's codebase as one flow
     .chapter-prose  paragraphs in a chapter body, same voice as .chapter-desc

   Reveal: when JS is present each beat fades up as it scrolls into view and
   its dot fills to ink (story.js). Without JS, or with reduced motion, every
   beat is simply there. */

/* ---- the hero ------------------------------------------------------- */

.intro .hero { margin-top: 80px; }

.kicker {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #494949;
    margin-bottom: 24px;
}

.hero p:not(.kicker) {
    font-size: clamp(24px, 3.3vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #000;
}

.hero p:not(.kicker) + p { margin-top: 32px; }

/* ---- the timeline --------------------------------------------------- */

.timeline {
    --tl-gap: 48px;
    --dot: 11px;          /* the traffic-light size, in ink */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tl-gap);
}

.chapter-desc + .timeline,
.chapter-desc + .matrix,
.chapter-desc + .chapter-prose { margin-top: 44px; }

.beat {
    position: relative;
    padding-left: 36px;
}

/* the dot: an outline that fills to ink once the beat has been read into view */
.beat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* the rail: each beat draws its own segment down to the next dot, so the
   line starts at the first dot and ends at the last one, nothing measured */
.beat:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--dot) / 2);
    top: calc(5px + var(--dot) + 6px);
    bottom: calc(-1 * var(--tl-gap) + 6px - 5px);
    width: 1px;
    background: var(--edge);
}

.beat-when {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--label);
    margin-bottom: 8px;
}

.beat h3 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.beat p {
    margin-top: 12px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--label);
    max-width: 46ch;
}

/* ---- the kit -------------------------------------------------------- */

/* Two lists side by side: what a direct channel is, and the tools behind
   it. Each list is ruled like the matrix — an ink rule under the name, a
   hairline between items — so the two modules read as one family. */
.kit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
}

.chapter-desc + .kit,
.kit + .chapter-prose { margin-top: 44px; }

.kit-group h3 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--label);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
}

.kit-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kit-group li {
    padding: 16px 0;
    border-bottom: 1px solid var(--edge);
}

.kit-name {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.kit-note {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--label);
}

/* ---- the matrix ----------------------------------------------------- */

.matrix {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.matrix col.mx-head-col { width: auto; }
.matrix col.mx-mark-col { width: 88px; }

.matrix th,
.matrix td {
    padding: 18px 0;
    border-bottom: 1px solid var(--edge);
    vertical-align: middle;
    text-align: left;
}

.matrix thead th {
    padding: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--label);
    border-bottom: 1px solid var(--ink);
}

.matrix th.mx-mark,
.matrix td.mx-mark {
    text-align: center;
}

.matrix tbody th {
    font-weight: 500;
}

.mx-name {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.mx-note {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--label);
}

/* yes is a solid dot, no is an empty ring — the same mark as the timeline */
.mx-mark i {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--ink);
    vertical-align: middle;
}

.mx-mark i.on { background: var(--ink); }

/* each mark carries its column's name; wide screens have the header row, so
   the name is read but not seen. Narrow screens show it beside the mark. */
.mx-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* the payoff row: a heavier rule above, the name in ink */
.matrix tr.mx-open th,
.matrix tr.mx-open td {
    border-bottom: 0;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- diagrams ------------------------------------------------------- */

/* Boxes, not pictures: ink for what is a thing, hairline for what is a
   part of a thing, and type at the page's own sizes so a phone never
   shrinks a label into a smudge. No arrows — the joins are words. */
.diagram {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.diagram figcaption {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--label);
}

.chapter-prose + .diagram,
.diagram + .matrix { margin-top: 44px; }

.dg-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--label);
    margin-bottom: 10px;
}

.dg-box {
    border: 1px solid var(--ink);
    padding: 16px;
}

.dg-title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.dg-chip {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 8px;
    border: 1px solid var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

/* codebases: one for everyone, then one each. Before sits above Now at
   every width — side by side, three boxes in half a column have no room
   for their names. */
.dg-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.dg-tenants {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dg-tenants li {
    padding: 4px 8px;
    border: 1px solid var(--edge);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--label);
}

.dg-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* anatomy: one vertical flow. The codebase in a frame; a two-way link
   down to the coding agents; the three kinds of edit fanning in below.
   Lines are 1px ink drawn by the boxes themselves, so they stay put at
   every width. */
.dg-system {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dg-frame {
    border: 1px solid var(--ink);
    padding: 16px;
}

.dg-frame > .dg-title { margin-bottom: 14px; }

.dg-layer {
    border: 1px solid var(--edge);
    padding: 12px 14px;
}

.dg-layer-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.dg-layer ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.dg-layer li {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--label);
}

/* the brand is the one solid thing in the frame */
.dg-layer.dg-brand {
    background: var(--ink);
    border-color: var(--ink);
}

.dg-brand .dg-layer-name { color: #fff; }

/* between layers: a short stem with the verb beside it */
.dg-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding-left: 28px;
}

.dg-flow::before {
    content: '';
    width: 1px;
    height: 100%;
    background: var(--ink);
}

.dg-flow span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--label);
}

/* frame to agents: one line, an arrowhead at each end */
.dg-link {
    position: relative;
    height: 48px;
    display: flex;
    justify-content: center;
}

.dg-link i {
    position: relative;
    display: block;
    width: 1px;
    height: 100%;
    background: var(--ink);
}

.dg-link i::before,
.dg-link i::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 7px;
    height: 7px;
    border-left: 1px solid var(--ink);
    border-top: 1px solid var(--ink);
}

.dg-link i::before { top: 0; transform: translateX(-50%) rotate(45deg); transform-origin: center; margin-top: 1px; }
.dg-link i::after { bottom: 0; transform: translateX(-50%) rotate(225deg); margin-bottom: 1px; }

.dg-link span {
    position: absolute;
    top: 50%;
    left: calc(50% + 14px);
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--label);
    white-space: nowrap;
}

.dg-agents {
    align-self: center;
    width: min(100%, 320px);
    border: 1px solid var(--ink);
    padding: 14px 16px;
    text-align: center;
}

.dg-stem {
    align-self: center;
    width: 1px;
    height: 28px;
    background: var(--ink);
}

/* three edits under one bar: the bar runs from the first centre to the
   last, each edit hangs from it on its own stem */
.dg-fan {
    list-style: none;
    margin: 0;
    padding: 24px 0 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dg-fan::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 1px;
    background: var(--ink);
}

.dg-fan li {
    position: relative;
    margin: 0 6px;
    padding: 12px 8px;
    border: 1px solid var(--edge);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.dg-fan li::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -24px;
    width: 1px;
    height: 24px;
    background: var(--ink);
}

/* ---- screenshots ---------------------------------------------------- */

/* A picture of real product, in the same hairline frame as the plates so
   a white screenshot has an edge against the white page. */
.shot {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--edge);
}

.shot figcaption {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--label);
}

.kit + .shot,
.shot + .chapter-prose,
.diagram + .shot,
.shot + .matrix { margin-top: 44px; }

/* ---- prose in a chapter --------------------------------------------- */

.chapter-prose {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 46ch;
}

.chapter-prose p {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--label);
}

.chapter-prose + .matrix { margin-top: 44px; }

/* ---- reveal --------------------------------------------------------- */

.js .beat {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 520ms ease, transform 520ms ease;
}

.js .matrix tbody tr,
.js .kit-group li,
.js .diagram,
.js .shot {
    opacity: 0;
    transition: opacity 520ms ease;
}

.js .beat::before {
    background: #fff;
    transition: background 300ms ease 300ms;
}

.js .beat.in,
.js .matrix tbody tr.in,
.js .kit-group li.in,
.js .diagram.in,
.js .shot.in {
    opacity: 1;
    transform: none;
}

.js .beat.in::before { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .js .beat,
    .js .matrix tbody tr,
    .js .kit-group li,
    .js .diagram,
    .js .shot {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js .beat::before {
        background: var(--ink);
        transition: none;
    }
}

/* ---- narrow --------------------------------------------------------- */

@media (max-width: 860px) {
    .chapter-prose + .diagram,
    .diagram + .matrix,
    .kit + .shot,
    .shot + .chapter-prose,
    .diagram + .shot,
    .shot + .matrix { margin-top: 28px; }
    .shot { gap: 14px; }
    .shot figcaption { font-size: 15px; }
    .diagram { gap: 14px; }
    .diagram figcaption { font-size: 15px; }
    .dg-panels { gap: 20px; }
    .dg-row { gap: 8px; }
    .dg-box { padding: 12px; }
    .dg-title { font-size: 15px; }
    .dg-chip { margin-top: 10px; padding: 3px 6px; font-size: 12px; white-space: nowrap; }
    .dg-frame { padding: 12px; }
    .dg-layer { padding: 10px 12px; }
    .dg-join { padding: 5px 12px; }
    .dg-flow { padding-left: 20px; height: 26px; }
    .dg-link { height: 40px; }
    .dg-fan li { margin: 0 3px; padding: 10px 4px; font-size: 13px; }

    .kit { grid-template-columns: 1fr; gap: 32px; }
    .chapter-desc + .kit,
    .kit + .chapter-prose { margin-top: 28px; }
    .kit-group li { padding: 14px 0; }
    .kit-name { font-size: 17px; }

    /* Each row restacks: name and note at full width, then the three marks
       listed beneath with their names beside them. The header row goes; its
       ink rule stays as the top of the table. */
    .matrix,
    .matrix tbody,
    .matrix tr,
    .matrix tbody th { display: block; }
    .matrix colgroup,
    .matrix thead { display: none; }

    .matrix { border-top: 1px solid var(--ink); }

    .matrix tr {
        padding: 16px 0 18px;
        border-bottom: 1px solid var(--edge);
    }

    .matrix tbody th,
    .matrix td.mx-mark {
        padding: 0;
        border: 0;
    }

    /* the marks stack, one per line — three in a row wrap unevenly on a phone */
    .matrix td.mx-mark {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--label);
    }

    .matrix tbody th + td.mx-mark { margin-top: 14px; }

    .mx-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .matrix tr.mx-open { border-bottom: 0; }
    .mx-name { font-size: 17px; }
    .mx-note { font-size: 15px; }

    .timeline { --tl-gap: 36px; }
    .beat { padding-left: 28px; }
    .beat h3 { font-size: 21px; }
    .beat p { font-size: 17px; margin-top: 8px; }
    .beat-when { font-size: 14px; margin-bottom: 6px; }

    .chapter-desc + .timeline,
    .chapter-desc + .matrix,
    .chapter-desc + .chapter-prose,
    .chapter-prose + .matrix { margin-top: 28px; }

    .chapter-prose { gap: 16px; max-width: none; }
    .chapter-prose p { font-size: 17px; }
}

@media (max-width: 700px) {
    .intro .hero { margin-top: 56px; }
    .kicker { font-size: 15px; margin-bottom: 16px; }
    .hero p:not(.kicker) + p { margin-top: 24px; }
}