/* ---- numbered deliverables, ruled like a bill of materials ----
     The old .phases table, kept: it is the right shape for "here is
     what is in the box, line by line" and that is what the phase pages
     need it for. Numbers come from a counter rather than being typed
     into the markup, so a line can be added or moved without renumbering
     by hand. The ink rule CLOSES the table rather than opening it, the
     same way it did on the homepage. */
  .steps{list-style:none;margin:0;padding:0;counter-reset:step;}
  .steps li{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:20px;
    padding:15px 0;
    border-bottom:1px solid var(--rule-c);
  }
  .steps li:first-child{padding-top:0;}
  .steps li:last-child{border-bottom-color:var(--ink);}
  .steps li::before{
    counter-increment:step;
    content:counter(step,decimal-leading-zero);
    color:var(--soft);
    font-size:.8rem;
    font-variant-numeric:tabular-nums;
  }
  .steps .t{
    display:block;
    font-family:"Instrument Serif",Georgia,serif;
    font-size:1.16rem;
    line-height:1.2;
  }
  /* A measure, because .steps fills the whole 820px body column and this
     line had none: it was setting at about 85ch beside paragraphs capped at
     66ch, and the line directly above it in the same block obeys the cap. */
  .steps .d{display:block;margin-top:3px;color:var(--body);font-size:.9rem;max-width:66ch;}

  /* Sits UNDER the rail, so the spacing is on top. It used to lead the
     section; reading the terms after the phases means the reader already
     knows what a phase boundary is when the sentence names one. */
  .note{
    margin:22px 0 0 !important;
    padding:12px 16px;
    background:rgba(255,77,77,.055);
    border-left:2px solid var(--red);
    color:var(--ink) !important;
    max-width:none !important;
  }

  .plain{list-style:none;margin:0;padding:0;}
  .plain li{padding:9px 0;border-bottom:1px solid var(--rule-c);color:var(--body);font-size:.92rem;}
  .plain li:first-child{padding-top:0;}
  /* Two columns as a GRID, not multicol. Multicol could not align either
     edge of the pair: `.plain li:first-child` matches only DOM item 1, so
     column two started 9px lower than column one, and every column ended on
     a rule with nothing under it. A grid flows row-major instead, so the
     two columns start on the same line and each rule runs straight across
     the gap. Reading order changes with it -- 1,2 / 3,4 / 5,6 down the rows
     rather than 1,2,3 down column one -- which is what you want for a list
     of parts anyway.
     The two rules below address the first and last ROW, and both assume an
     EVEN number of items (four today). At an odd count the last row is one
     item and `nth-last-child(-n+2)` would reach back into the row above:
     add or remove these in pairs, or fix the selectors. */
  .cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;}
  .cols2 li:nth-child(-n+2){padding-top:0;}
  .cols2 li:nth-last-child(-n+2){border-bottom:0;}
  /* ---- the handover pack ----
     This was the one deliverables block on the page set as flat body copy:
     six grey lines at .92rem, no serif anywhere, sitting between three blocks
     that all carry the house type pair (.tri's .t/.d, .steps' .t/.d,
     .fit's serif h3). That is why it read as plain -- not too little
     decoration, no hierarchy.
     It borrows the type pair and nothing else. The ruled ROWS stay: it is a
     checklist, and .tri and .fit already give the page two boxed
     grids, so a third would flatten the difference between them. */
  .pack li{padding:12px 0;}
  .pack .t{
    display:block;
    font-family:"Instrument Serif",Georgia,serif;
    font-size:1.16rem;
    line-height:1.2;
    color:var(--ink);
  }
  .pack .d{display:block;margin-top:3px;color:var(--body);font-size:.9rem;}
  .aside{margin:18px 0 0 !important;font-size:.85rem;color:var(--soft) !important;}

  /* ---- closing band, on ink ---- */
  .end{background:var(--ink);color:var(--paper);position:relative;z-index:1;}
  .end .in{padding-top:64px;padding-bottom:64px;}
  .end .sec > h2{color:var(--red);}
  /* Colour stated, not inherited: .body > p paints every paragraph in a
     section --body, which outranks the colour .end sets on itself. On the
     homepage this line is an email address, so .end a repainted it and the
     bug stayed hidden; the phase pages put plain text here and it came out
     dark grey on near-black. */
  .end .big{
    font-family:"Instrument Serif",Georgia,serif;
    font-size:clamp(1.5rem,3.4vw,2.2rem);
    margin:0;
    color:var(--paper);
  }
  .end a{color:var(--paper);border-bottom-color:var(--red);}
  .end a:hover{color:var(--red);}
  /* 5.32:1 is red text ON ink, which is the rule above, not this one. This
     rule paints paper letters on a red fill: --red gives 3.14:1 at 16.8px
     under a 4.5 threshold, and --red-text gives 5.59. Nothing renders it
     today -- no .btn exists inside .end on either page -- so this is the
     value it should have the day one is added, not a live fix. */
  .end .btn:hover{background:var(--red-text);color:var(--paper);}
  /* Availability sits between the address and the signature, because that is
     where a reader who has decided to write is looking. Paper, not --soft:
     it answers "when can he start", which is a question, not a footnote. */
  .end .avail{margin:20px 0 0;color:var(--paper);font-size:.95rem;}
  .end .who{margin:20px 0 0;color:var(--soft-ink);font-size:.85rem;}
  /* Belgian information-society-service details and the GDPR Art. 13 notice.
     One line, last thing on the page, deliberately quiet -- it has to be
     permanently accessible, not prominent. */
  .end .legal{margin:8px 0 0;color:var(--soft-ink);font-size:.8rem;}
  .end .legal a{color:var(--soft-ink);border-bottom-color:var(--soft-ink);}
  .end .legal a:hover{color:var(--red);border-bottom-color:var(--red);}