/* r11-s6t.css (2026-10-20): #s6 "06 Inside", the section head and items 1 and 3 (the owner's sketches 2-3):
   two timelines on one component and one time scale, each with a gold hand-written question beside it.
   Item 2 (the gifts) is r11-s6g.css. Desktop only (#s6 .dk.r11-sec); the phone keeps its held frame.

   The timeline (.r11-s6t-tl): 1 Dec 2023 (day 0) to 10 Jan 2024 (day 40) across the column; a day's
   position is var(--d) / 40 of the width, so it scales with the column while the type keeps its size.
   The year line sits at midnight between 31 Dec and 1 Jan (day 30.5). Bars stand on the zero line,
   var(--v) of --U tall (1 = the item's largest amount). Item 1 also hangs the credit note under the
   zero line and runs the date ruler under it; item 3 has no negative and its ruler is the zero line.
   Item 1 animates once (r11-s6t.js: .is-armed, then .is-run when half on screen); without JS, with
   reduced motion and in print the markup shows the final state. Item 3 is static. */

@media (min-width: 768px) {
  /* s6 is also .v3-hold (the phone's held frame: no padding); on desktop it takes the r11 rhythm. */
  #s6.r11 { padding-top: var(--step-pt); padding-bottom: var(--step-pb); }

  /* ---------- The figure: the timeline, the question, the caption ----------
     768-1199px: the timeline takes the whole width; the caption and the question share the row under
     it, the question's arrow rising to the 2 Jan column. From 1200px: the question stands beside the
     timeline (the owner's sketch), its arrow pointing back at it; the caption under the timeline. */
  .r11-s6t-fig {
    /* The question's column starts a fixed 72px before the 2 Jan column (at 80% of the width), so its
       arrow always lands just left of the "2 Jan" label. */
    --qw: calc(20% + 72px);
    --qg: clamp(32px, 4vw, 40px);      /* the gap between the columns */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--qw);
    grid-template-areas: "tl tl" "cap q";
    column-gap: var(--qg);
    margin: 0;
  }
  .r11-s6t-cap { grid-area: cap; margin-top: 22px; }
  .r11-s6t-cap > .r11-cap { margin-top: 0; }

  /* ---------- The timeline ---------- */
  .r11-s6t-tl {
    grid-area: tl;
    --n: 40;                  /* days from 1 Dec 2023 to 10 Jan 2024 */
    --yx: calc(30.5 * 100% / var(--n));   /* the year line */
    --top: 28px;              /* the fiscal-year labels above the bars */
    --U: 84px;                /* the tallest bar */
    --D: 0px;                 /* room under the zero line */
    --gap: 0px;               /* zero line to date ruler */
    --y0: calc(var(--top) + var(--U));
    --yr: calc(var(--y0) + var(--D) + var(--gap));
    position: relative;
    height: calc(var(--yr) + 28px);
    min-width: 0;
  }
  .r11-s6t-tl--cancel { --D: calc(var(--U) * .8708); --gap: 14px; }
  .r11-s6t-tl > * { position: absolute; margin: 0; font-style: normal; }

  /* Fiscal years: mono, like the kicker, either side of the year line (11px: the step label's size). */
  .r11-s6t-fy {
    top: 0;
    font: 500 11px/14px var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--slate-800);
  }
  .r11-s6t-fy--a { right: calc(100% - var(--yx) + 10px); }
  .r11-s6t-fy--b { left: calc(var(--yx) + 10px); }

  .r11-s6t-yl {
    left: var(--yx);
    top: 0;
    height: calc(var(--yr) + 6px);
    width: 0;
    margin-left: -.75px;
    border-left: 1.5px solid var(--slate-900);
  }

  .r11-s6t-zero {
    left: 0;
    right: 0;
    top: var(--y0);
    border-top: 1px solid var(--slate-300);
  }

  /* The date ruler: a hairline, a tick a day. */
  .r11-s6t-ruler {
    left: 0;
    right: 0;
    top: var(--yr);
    height: 5px;
    border-top: 1px solid var(--slate-500);
    background: linear-gradient(90deg, var(--slate-300) 1px, transparent 1px) 0 0 / calc(100% / var(--n)) 4px repeat-x;
  }
  .r11-s6t-ruler::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 4px;
    background: var(--slate-300);
  }

  .r11-s6t-date {
    top: calc(var(--yr) + 10px);
    left: calc(var(--d) * 100% / var(--n));
    transform: translateX(-50%);
    font: 400 12px/16px var(--sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink-dim);
  }
  .r11-s6t-date.is-first { transform: none; }
  .r11-s6t-date.is-last { transform: translateX(-100%); }
  .r11-s6t-date.is-gold { font-weight: 600; color: var(--r11-ink); }

  /* Bars, 12px wide, centred on their day. */
  .r11-s6t-bar {
    left: calc(var(--d) * 100% / var(--n) - 6px);
    width: 12px;
    height: calc(var(--v) * var(--U));
  }
  .r11-s6t-bar.is-up { top: calc(var(--y0) - var(--v) * var(--U)); transform-origin: 50% 100%; }
  .r11-s6t-bar.is-down { top: calc(var(--y0) + 1px); transform-origin: 50% 0; }
  .r11-s6t-bar.is-new { background: var(--r11-mark); }
  .r11-s6t-bar.is-old { background: var(--slate-700); }
  /* Item 1's cancelled pair: drawn strong, then (the final state) stepped back. */
  .r11-s6t-bar.is-inv { background: var(--slate-300); }
  .r11-s6t-bar.is-cn { background: var(--slate-50); box-shadow: inset 0 0 0 1.5px var(--slate-500); }

  /* Labels beside the bars' tops (the credit note's beside its foot). */
  .r11-s6t-lab {
    left: calc(var(--d) * 100% / var(--n) + 14px);
    white-space: nowrap;
  }
  .r11-s6t-lab.is-up { top: calc(var(--y0) - var(--v) * var(--U) - 4px); }
  .r11-s6t-lab.is-down { top: calc(var(--y0) + var(--v) * var(--U) - 38px); }
  .r11-s6t-lab .r11-num { display: block; font-size: 18px; line-height: 22px; }
  .r11-s6t-what {
    display: block;
    font: 400 12px/16px var(--sans);
    color: var(--ink-dim);
  }
  .r11-s6t-lab.is-new .r11-num,
  .r11-s6t-lab.is-new .r11-s6t-what { color: var(--r11-ink); }
  .r11-s6t-lab.is-inv .r11-num,
  .r11-s6t-lab.is-cn .r11-num { color: var(--ink-dim); }

  /* Net 0 kr, on the zero line beside the pair (the ground behind it cuts the line). */
  .r11-s6t-net {
    left: calc(var(--d) * 100% / var(--n) + 10px);
    top: calc(var(--y0) - 11px);
    padding: 0 6px 0 4px;
    background: var(--slate-50);
    font: 600 12px/22px var(--sans);
    white-space: nowrap;
    color: var(--slate-800);
  }
  .r11-s6t-net .r11-num { font-size: 18px; font-weight: 500; margin-right: 3px; }

  /* The new invoice's way: dated 1 Dec (the ring), along the ruler, up at 2 Jan into its bar. */
  .r11-s6t-track {
    left: 0;
    width: calc(32 * 100% / var(--n));
    top: calc(var(--yr) - 1px);
    height: 2px;
    background: var(--r11-mark);
    transform-origin: 0 50%;
  }
  .r11-s6t-stem {
    left: calc(var(--d) * 100% / var(--n));
    top: calc(var(--y0) + 1px);
    height: calc(var(--yr) - var(--y0) - 1px);
    width: 0;
    margin-left: -.75px;
    border-left: 1.5px dotted var(--r11-mark);
    transform-origin: 50% 100%;
  }
  .r11-s6t-dot {
    left: -5px;
    top: calc(var(--yr) - 5px);
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid var(--r11-ink);
    border-radius: 50%;
    background: var(--slate-50);
  }
  .r11-s6t-dnote {
    left: 0;
    top: calc(var(--yr) - 26px);
    font: 600 12px/16px var(--sans);
    white-space: nowrap;
    color: var(--r11-ink);
  }

  /* ---------- The gold hand: the question, its arrow pointing back at the timeline ---------- */
  .r11-s6t-q {
    grid-area: q;
    align-self: start;
    position: relative;
    display: flex;                     /* lines stack without collapsing their (negative) margins */
    flex-direction: column;
    align-items: flex-start;
    margin: 26px 0 0;
    font-size: 24px;
  }
  /* Each line a box of its own (the write-in mask runs per line). The padding gives Caveat's overhangs
     (the "?", the "e" of "make") room inside the masked box; the margins take it back out of the layout. */
  .r11-s6t-ql {
    display: block;
    width: max-content;
    max-width: 100%;
    padding: 4px 10px 6px 0;
    margin: -4px -10px -6px 0;
  }
  .r11-s6t-arrow { position: absolute; display: block; }
  .r11-s6t-arrow.is-side { display: none; }
  /* Rising from beside the first line to the date row, just left of "2 Jan". */
  .r11-s6t-arrow.is-up { left: -18px; top: -40px; width: 76px; height: 56px; }
}

/* A tablet's column (under 900px): the labels at 2 Jan one size down, so "6,000 kr / chain" stays inside. */
@media (min-width: 768px) and (max-width: 899px) {
  .r11-s6t-lab .r11-num { font-size: 16px; line-height: 20px; }
  .r11-s6t-q { font-size: 22px; }
}

@media (min-width: 1200px) {
  .r11-s6t-fig {
    --qw: 272px;
    --qg: 96px;                        /* the gap the arrow crosses */
    grid-template-areas: "tl q" "cap .";
  }
  .r11-s6t-q { margin-top: 18px; font-size: 27px; }
  .r11-s6t-arrow.is-up { display: none; }
  .r11-s6t-arrow.is-side { display: block; right: calc(100% + 8px); top: 2px; width: 80px; height: 30px; }
}

/* ---------- Item 1 animates once (r11-s6t.js). Screen only: print shows the final state. ---------- */
@media screen and (min-width: 768px) {
  .is-armed .r11-s6t-bar,
  .is-armed .r11-s6t-track,
  .is-armed .r11-s6t-stem { transform: scale(1, 0); }
  .is-armed .r11-s6t-track { transform: scale(0, 1); }
  .is-armed .r11-s6t-lab,
  .is-armed .r11-s6t-net,
  .is-armed .r11-s6t-dot,
  .is-armed .r11-s6t-dnote { opacity: 0; }
  .is-armed .r11-s6t-bar.is-inv { background: var(--slate-700); }
  .is-armed .r11-s6t-bar.is-cn { box-shadow: inset 0 0 0 1.5px var(--slate-800); }
  .is-armed .r11-s6t-lab.is-inv .r11-num,
  .is-armed .r11-s6t-lab.is-cn .r11-num { color: var(--slate-900); }

  .is-run .r11-s6t-bar,
  .is-run .r11-s6t-track,
  .is-run .r11-s6t-stem { transform: none; }
  .is-run .r11-s6t-lab,
  .is-run .r11-s6t-net,
  .is-run .r11-s6t-dot,
  .is-run .r11-s6t-dnote { opacity: 1; }
  .is-run .r11-s6t-bar.is-inv { background: var(--slate-300); }
  .is-run .r11-s6t-bar.is-cn { box-shadow: inset 0 0 0 1.5px var(--slate-500); }
  .is-run .r11-s6t-lab.is-inv .r11-num,
  .is-run .r11-s6t-lab.is-cn .r11-num { color: var(--ink-dim); }

  /* The order: invoice up, credit note down, they cancel (step back, 0 kr), the new invoice is dated,
     travels along the ruler past the year line, rises at 2 Jan. ~3 s. Then the hand writes. */
  .is-run .r11-s6t-bar.is-inv { transition: transform .45s cubic-bezier(.2, .7, .2, 1) 0s, background-color .45s ease 1.05s; }
  .is-run .r11-s6t-lab.is-inv { transition: opacity .3s ease .2s; }
  .is-run .r11-s6t-lab.is-inv .r11-num { transition: color .45s ease 1.05s; }
  .is-run .r11-s6t-bar.is-cn { transition: transform .45s cubic-bezier(.2, .7, .2, 1) .5s, box-shadow .45s ease 1.05s; }
  .is-run .r11-s6t-lab.is-cn { transition: opacity .3s ease .7s; }
  .is-run .r11-s6t-lab.is-cn .r11-num { transition: color .45s ease 1.05s; }
  .is-run .r11-s6t-net { transition: opacity .35s ease 1.15s; }
  .is-run .r11-s6t-dot { transition: opacity .25s ease 1.55s; }
  .is-run .r11-s6t-dnote { transition: opacity .3s ease 1.6s; }
  .is-run .r11-s6t-track { transition: transform .8s cubic-bezier(.45, .05, .3, 1) 1.7s; }
  .is-run .r11-s6t-stem { transition: transform .25s ease-out 2.5s; }
  .is-run .r11-s6t-bar.is-new { transition: transform .5s cubic-bezier(.2, .7, .2, 1) 2.7s; }
  .is-run .r11-s6t-lab.is-new { transition: opacity .35s ease 3s; }

  /* The hand writes in line by line (a soft mask from the left), then the arrow is drawn. */
  .is-armed .r11-s6t-ql {
    -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
    mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
    -webkit-mask-size: 240% 100%;
    mask-size: 240% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  .is-run .r11-s6t-ql { -webkit-mask-position: 0 0; mask-position: 0 0; }
  .is-run .r11-s6t-ql:nth-of-type(1) { transition: -webkit-mask-position .5s linear 3.4s, mask-position .5s linear 3.4s; }
  .is-run .r11-s6t-ql:nth-of-type(2) { transition: -webkit-mask-position .5s linear 3.9s, mask-position .5s linear 3.9s; }
  .is-run .r11-s6t-ql:nth-of-type(3) { transition: -webkit-mask-position .4s linear 4.4s, mask-position .4s linear 4.4s; }
  .is-armed .r11-s6t-lead { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  .is-armed .r11-s6t-head { opacity: 0; }
  .is-run .r11-s6t-lead { stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease-in-out 4.8s; }
  .is-run .r11-s6t-head { opacity: .92; transition: opacity .15s linear 5.2s; }

  /* Passed unseen (a jump) or reduced motion after arming: no entrance. */
  .is-instant,
  .is-instant * { transition: none !important; }
}

/* ---------- Item 3 (owner, 2026-10-20, as the sketch): no bars. A plain timeline whose two dates are
   ringed in the gold pen, the price per chain hand-written under each: 2,880 kr at 15 Dec (the first
   invoice), 6,000 kr at 2 Jan (the new one).
   Polish r1: one axis for both timelines. The axis sits 54px under the figure's top (28 + --U 26), as
   step 2's line does, drawn as that line (1.5px slate-700, no daily ticks; the two date ticks stay).
   The end dates stand above it on step 2's label row; under it only the two ringed dates. ---------- */
@media (min-width: 768px) {
  .r11-s6t-tl--price { --U: 26px; height: calc(var(--yr) + 74px); }
  .r11-s6t-tl--price .r11-s6t-yl { height: var(--yr); }   /* stops on the axis, clear of the 2 Jan ring */
  .r11-s6t-tl--price .r11-s6t-ruler {
    height: 0;
    background: none;
    border-top: 1.5px solid var(--slate-700);
  }
  .r11-s6t-tl--price .r11-s6t-ruler::after { display: none; }
  .r11-s6t-tl--price .r11-s6t-date.is-first,
  .r11-s6t-tl--price .r11-s6t-date.is-last { top: calc(var(--yr) - 30px); }   /* 24px: step 2's end labels */
  .r11-s6t-tick {
    left: calc(var(--d) * 100% / var(--n));
    top: calc(var(--yr) - 4px);
    width: 0;
    height: 9px;
    margin-left: -.75px;
    border-left: 1.5px solid var(--slate-900);
  }
  /* The ringed dates at step 2's day-label size (13px/600), centred in their 78x34 rings. */
  .r11-s6t-date.is-pen { font-size: 13px; font-weight: 600; color: var(--slate-900); }
  .r11-s6t-ring {
    left: calc(var(--d) * 100% / var(--n) - 39px);
    top: calc(var(--yr) + 1px);
    width: 78px;
    height: 34px;
  }
  .r11-s6t-ring path { stroke-width: 1.8; }
  .r11-s6t-price {
    left: calc(var(--d) * 100% / var(--n));
    top: calc(var(--yr) + 40px);
    transform: translateX(-50%) rotate(-1.5deg);
    font-size: 24px;
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .r11-s6t-price { font-size: 21px; }
}

/* ---------- Item 1 (owner's pick "A", 2026-10-20: "a very simple timeline, and the activities"): one line,
   the year mark, a dot on each payment day with its date above and its activities under it: 15 Dec, the
   invoice and the credit note paid (= 0 kr); 2 Jan, after the new year, the new invoice paid, in gold. ---------- */
@media (min-width: 768px) {
  /* Polish r2: the box ends 2px under the ink of the 15 Dec footing (its "= 0 kr" sits on 142px), not
     25px under it, so the empty space from step 2 to step 3 is the same as from step 1 to step 2
     (the steps stay 72px apart, rule 15). The footing's line box hangs 5px below; nothing is drawn there. */
  .r11-s6t-tl--simple { height: 144px; }
  /* Polish r3: one year mark for both timelines: the line stops on the axis (its top, 54px), as step 3's
     does (var(--yr) = 54 there), instead of running 16px through and under it. */
  .r11-s6t-tl--simple .r11-s6t-yl { height: 54px; }
  .r11-s6t-tl--simple .r11-s6t-fy--b { color: var(--r11-ink); }
  .r11-s6t-line { left: 0; right: 0; top: 54px; height: 0; border-top: 1.5px solid var(--slate-700); }
  /* Polish r1: the line's two end dates stand on the day labels' row above it (24px at 12/16 puts their
     baseline on that of "15 Dec" / "2 Jan" at 13/18 from 22px: both at 36px), so the row under the line
     holds only the activities and "10 Jan 2024" no longer runs into "New invoice paid". */
  .r11-s6t-tl--simple .r11-s6t-date { top: 24px; }
  .r11-s6t-pt {
    left: calc(var(--d) * 100% / var(--n) - 6.5px);
    top: 48px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--slate-900);
  }
  .r11-s6t-pt.is-gold { left: calc(var(--d) * 100% / var(--n) - 7.5px); top: 47px; width: 15px; height: 15px; background: var(--gold); }
  .r11-s6t-day {
    left: calc(var(--d) * 100% / var(--n));
    top: 22px;
    transform: translateX(-50%);
    font: 600 13px/18px var(--sans);
    white-space: nowrap;
    color: var(--slate-900);
  }
  .r11-s6t-day.is-gold { color: var(--r11-ink); }
  .r11-s6t-act {
    left: calc(var(--d) * 100% / var(--n));
    top: 78px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font: 400 13px/20px var(--sans);
    white-space: nowrap;
    color: var(--slate-900);
  }
  .r11-s6t-act .r11-num { font-size: 16px; }
  .r11-s6t-act b { margin-top: 4px; font-weight: 600; }
  /* 15 Dec as an accounting footing (polish r1): the labels left, the figures right-aligned in one
     column, a hairline over "= 0 kr" as wide as the figures. The block stays centred on its dot.
     Polish r2: the footing is set in the figures' face (the 16px serif, tabular, a weight up) and its
     unit hangs outside the figure column, so the "0" ends on the units digit of 882,960 and " kr"
     stands to its right. --kr is the width of " kr" in that face (18.16px, measured in Chrome with
     Newsreader loaded), --fig the figure column ("+882,960" in the 16px serif is 63.84px). The box
     reaches --kr past the block's right edge (a negative margin, so the block's width and its
     centring do not change); the hairline, drawn as a background, spans only the figure column. */
  .r11-s6t-tl--simple .r11-s6t-act:not(.is-gold) { align-items: stretch; }
  .r11-s6t-tl--simple .r11-s6t-act:not(.is-gold) > span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .r11-s6t-tl--simple .r11-s6t-act:not(.is-gold) > b {
    --fig: 64px;
    --kr: 18.16px;
    align-self: flex-end;
    min-width: calc(var(--fig) + var(--kr));
    box-sizing: border-box;
    margin-top: 4px;
    margin-right: calc(-1 * var(--kr));
    padding-top: 3px;
    border-top: 0;
    background: linear-gradient(var(--slate-300), var(--slate-300)) left top / calc(100% - var(--kr)) 1px no-repeat;
    font: 500 16px/22px var(--serif);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -.02em;
    font-optical-sizing: auto;
    text-align: right;
  }
  .r11-s6t-act.is-gold { color: var(--r11-ink); }
  /* Polish r3: the page's one amount size, 20/24 (the s4 ledger's), not 22/1.2. Colours: rule 15, below. */
  .r11-s6t-act .r11-s6t-big { font-size: 20px; line-height: 24px; color: var(--r11-ink); }
}

/* ---------- Section 6 as three steps on one rail (the owner's pick "A", 2026-10-20) ----------
   What (the gifts) · When (the simple timeline) · Why the amount changed (the chain price). Each step: its
   number on a gold rail, a short text on the left, its figure beside it; the per-figure captions are gone
   (the step texts carry them) and one source line closes the section. Desktop only (#s6 .dk.r11-sec). */
@media (min-width: 768px) {
  /* Polish r1: 28px under the head (the r11 head-to-content step) and 24px to the source line, so the
     section fits one 945px screen at 1512 after a rail jump; 72px between the steps (rule 15). */
  #s6 .r11-head + .r11-step { margin-top: 28px; }
  .r11-step {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 300px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .r11-step + .r11-step { margin-top: 72px; }
  /* Polish r3: each number is centred on its key label ("1 · WHAT"): the circle's centre sat 5.84px
     under the kicker's cap-height centre (measured at 1512), so it rises 6px (the row's height, set by
     the taller text, does not change). The rail moves with it and stays 4px clear of both circles:
     from 4px under this circle (26 + 4 = 30) to 4px over the next one (72 - 6 - 4 = 62 under the step). */
  .r11-step:not(:last-of-type)::before {   /* the rail: from this number down to the next */
    content: "";
    position: absolute;
    left: 15.25px;
    top: 30px;
    bottom: -62px;
    width: 1.5px;
    background: var(--r11-mark);
  }
  .r11-step-n {
    margin-top: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1.5px solid var(--r11-mark);
    border-radius: 50%;
    background: var(--slate-50);
    font: 500 13px/1 var(--mono);
    color: var(--r11-ink);
  }
  .r11-step-text > * { margin: 0; }
  .r11-step-k {
    padding-top: 2px;
    font: 500 11px/16px var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--r11-ink);
  }
  .r11-step-h {
    margin-top: 6px !important;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-optical-sizing: auto;
    text-wrap: balance;
    color: var(--slate-900);
  }
  .r11-step-p {
    margin-top: 8px !important;
    font: 400 15px/24px var(--sans);   /* the page's body leading, 15/24, as in the s5 emails (polish r2) */
    text-wrap: pretty;
    color: var(--slate-800);
  }
  .r11-step-fig { min-width: 0; padding-top: 6px; }
  .r11-step-fig > figure { margin: 0; }

  /* The timelines beside their text: the question in a narrower column, its arrow across a shorter gap. */
  .r11-step .r11-s6t-fig { --qw: 210px; --qg: 40px; grid-template-areas: "tl q"; grid-template-columns: minmax(0, 1fr) var(--qw); }
  .r11-step .r11-s6t-q { margin-top: 18px; font-size: 24px; }
  .r11-step .r11-s6t-arrow.is-up { display: none; }
  /* The arrow's tip on the timeline's right end (the axis, 54px down), not on "10 Jan 2024" above it. */
  .r11-step .r11-s6t-arrow.is-side { display: block; right: calc(100% + 4px); top: 20px; width: 34px; height: 30px; }

  /* Owner, 2026-10-20: on the When timeline only the 2 Jan dot is gold; its date, "2024" and
     "New invoice paid 1,014,000 kr" are in black. */
  .r11-s6t-tl--simple .r11-s6t-day.is-gold,
  .r11-s6t-tl--simple .r11-s6t-fy--b,
  .r11-s6t-tl--simple .r11-s6t-act.is-gold,
  .r11-s6t-tl--simple .r11-s6t-act .r11-s6t-big { color: var(--slate-900); }

  .r11-steps-src { margin-top: 24px !important; padding-left: 56px; max-width: 60em; }
}
/* Polish r3: text and figure side by side (from 1200px), the gutter between them 40px (24 + 16), the
   same as the timeline-to-question gap, so a one-line heading ("The same chains, a higher price") no
   longer ends 33px from "1 Dec 2023". The text column, the source line (56px) and the question column
   keep their places; the figures start 16px further in, all three on one edge. */
@media (min-width: 1200px) {
  .r11-step-fig { padding-left: 16px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .r11-step { grid-template-columns: 32px minmax(0, 1fr); row-gap: 18px; }
  .r11-step-fig { grid-column: 2; }
  .r11-step .r11-s6t-fig { grid-template-areas: "tl" "q"; grid-template-columns: minmax(0, 1fr); }
  .r11-step .r11-s6t-arrow.is-side { display: none; }
}

/* Polish r1: on arrival a step's number and its gold rail come up with the step's text (story.js makes
   the text an entrance unit: .rv, then .is-in once; .rv-quick on a jump, .rv-now when shown with no
   entrance). Screens with motion and story.js only (html.has-reveal): without JS, with reduced motion
   and in print everything shows at once, as before. A browser without :has() drops the hiding rules. */
@media screen and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.has-reveal .r11-step > .r11-step-n,
  html.has-reveal .r11-step::before { transition: opacity .4s ease; }
  html.has-reveal .r11-step:has(> .r11-step-text.rv:not(.is-in)) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.rv:not(.is-in))::before { opacity: 0; }
  html.has-reveal .r11-step:has(> .r11-step-text.rv-quick) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.rv-quick)::before { transition-duration: .14s; }
  html.has-reveal .r11-step:has(> .r11-step-text.rv-now) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.rv-now)::before { transition: none; }
}