/* The record: three companies, each its own screen. Round 9.

   ONE skeleton, three jobs for the picture. Every section sets the same things in the same places:
   the text column on the left (when, who, three action points, the tools), and the figure at the
   foot, standing across the line where the text side meets the picture. Only the picture changes
   role, to suit what kind of picture it is:
     plate    a diagram, which has to be read whole: the right part of the page, with a copper edge
     wash     a photograph: the whole ground of the section, under an ink scrim the text stands on
     window   a screenshot: seen through an opening cut at the angle of the Cut, cropped on purpose
   One timeline rail stands at the left for the whole record and marks which company is on screen.

   Tokens, the spacing scale and the display face come from base.css and _head.part. */

/* ---------- the skeleton ---------- */
.record{position:relative}
.co{--edge:54%;position:relative;min-height:100svh;padding:0;overflow:hidden;background:var(--ink);color:rgb(var(--latent));isolation:isolate}
.co-in{position:relative;z-index:2;display:flex;min-height:100svh;
  padding:clamp(4rem,11vh,8rem) var(--gut) clamp(3rem,9vh,6rem) calc(var(--gut) + var(--railw))}
.co-text{flex:0 1 var(--textw,46%);min-width:0;display:flex;flex-direction:column}
.record{--railw:6.5rem}

.co-when{margin:0 0 var(--s4);font-size:.84rem;letter-spacing:.02em;color:rgb(var(--latent) / .76)}
.co-name{margin:0;font-size:clamp(2rem,3.4vw,5.25rem);line-height:.92;text-transform:uppercase;text-wrap:balance}
.co-meta{margin:var(--s4) 0 0;font-size:.95rem;color:rgb(var(--latent) / .74)}
.co-points{list-style:none;margin:clamp(1.25rem,3.4vh,2.25rem) 0 0;padding:0;max-width:40rem}
/* the top rule belongs to the first row, not the list: rows are struck by the ink, the list is not */
.co-points li:first-child{border-top:1px solid var(--rule)}
.co-points li{padding:clamp(.7rem,1.5vh,1rem) 0;border-bottom:1px solid var(--rule)}
.co-points .lbl{display:block;margin-bottom:.4em;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--latent))}
.co-points .txt{margin:0;font-size:1.02rem;line-height:1.48;color:rgb(var(--latent) / .82)}
.co-points strong{font-weight:600;color:rgb(var(--latent))}
.co-tools{margin:var(--s4) 0 0;max-width:35rem;font-size:.84rem;line-height:1.5;color:rgb(var(--latent) / .66)}

/* the stat: the payoff, in the section's bottom-right corner over the picture, right-aligned. It is
   struck last, as the ink's edge reaches that corner. No captions: the picture and the number carry it. */
.co-stat{position:absolute;z-index:3;right:var(--gut);bottom:clamp(1.5rem,4vh,2.75rem);margin:0;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.08em}
.co-stat b{font-size:clamp(3.25rem,6vw,7.5rem);line-height:.85;font-variant-numeric:lining-nums;color:rgb(var(--latent));text-shadow:0 2px 16px rgb(14 20 28 / .55)}
.co-stat span{max-width:26ch;font-size:1rem;line-height:1.4;color:rgb(var(--latent) / .9);text-shadow:0 1px 4px rgb(14 20 28 / .8)}
/* the one disclosure that stays: a small mark under the R5 figure that the picture is AI-made */
.co-mark{display:block;margin-top:.55em;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--latent) / .5)}

.co-pic{position:absolute;inset:0;z-index:1;pointer-events:none}
.co-visual{margin:0}
.co-visual img{display:block}

/* a short fall of shade at the foot of every picture, so the figure reads over whatever is there */
.co-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgb(30 39 50 / .86),rgb(30 39 50 / 0) 40%)}

/* ---------- plate: a diagram, read whole ---------- */
.co--plate{--edge:44%;--textw:36%}
.co--plate .co-visual{position:absolute;z-index:1;top:0;right:0;bottom:0;left:var(--edge);display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(2.5rem,6vh,5rem) clamp(1.5rem,2.4vw,3.5rem) clamp(3.5rem,8vh,5.5rem);background:#1E2731;border-left:2px solid var(--copper);
  box-shadow:inset 2.5rem 0 2.5rem -2.5rem rgb(0 0 0 / .5)}
.co--plate .co-visual img{width:100%;height:100%;object-fit:contain;object-position:50% 0}

/* ---------- wash: a photograph, as the ground ---------- */
.co--wash{--edge:50%;--textw:42%}
.co--wash .co-visual{position:absolute;z-index:0;top:0;right:0;bottom:0;left:36%;overflow:hidden}   /* the picture settles from a slight scale; it must not spill past its own scrim */
.co--wash .co-visual img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%)}
/* the scrim: solid ink under the text column, clearing to the photograph on the right */
/* (reaching 2px past the picture's left edge: at a fractional width the two are snapped to the
   pixel grid separately, and a sliver of bare photograph showed as a seam) */
.co--wash .co-visual::after{left:-2px;background:
  linear-gradient(90deg,var(--ink) 0%,rgb(38 49 61 / .92) 16%,rgb(38 49 61 / .5) 40%,rgb(38 49 61 / .16) 72%,rgb(38 49 61 / .1) 100%),
  linear-gradient(to top,rgb(30 39 50 / .86),rgb(30 39 50 / 0) 40%)}

/* ---------- window: a screenshot, cropped on purpose ---------- */
.co--window{--edge:50%;--textw:44%}
.co--window .co-visual{position:absolute;z-index:1;top:0;bottom:0;left:var(--edge);width:66%;overflow:hidden;background:#1B232C;
  transform:skewX(-22deg);transform-origin:0 100%;border-left:2px solid var(--copper)}
/* the picture stands upright inside the leaning frame; it shows a zoomed crop so the interface is
   legible, not the whole page shrunk to nothing */
.co--window .co-visual img{position:absolute;top:0;left:0;width:80%;height:100%;object-fit:cover;object-position:var(--focus,50% 24%);
  transform:skewX(22deg);transform-origin:0 100%}
.co--window .co-visual::after{transform:skewX(22deg);transform-origin:0 100%;width:75%}

/* ---------- the timeline rail ----------
   One scale for the whole record: June 2025 at the top, the end of August 2026 at the foot, a tick
   a month and a longer one each quarter. A segment per company; R5 and Borrelli's ran at the same
   time, so they stand side by side. The company on screen is lit and carries its months.
   It is sticky inside .record with no height of its own, so it needs no script to stay put. */
.rail-wrap{position:sticky;top:0;height:0;z-index:9;pointer-events:none}
.rail{--months:15;position:absolute;left:var(--gut);top:50svh;transform:translateY(-50%);width:var(--railw);height:min(58svh,34rem);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--latent) / .66);font-variant-numeric:lining-nums tabular-nums;
  transition:opacity .5s var(--ease)}
.rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(var(--latent) / .3)}
.rail-ticks{position:absolute;left:1px;top:0;bottom:0;width:12px;
  background:
    repeating-linear-gradient(to bottom,rgb(var(--latent) / .45) 0 1px,transparent 1px calc(100% / 5)) 0 0/12px calc(100% + 1px) no-repeat,
    repeating-linear-gradient(to bottom,rgb(var(--latent) / .28) 0 1px,transparent 1px calc(100% / 15)) 0 0/6px calc(100% + 1px) no-repeat}
.rail-y{position:absolute;left:1.5rem;top:calc(var(--at) / var(--months) * 100%);transform:translateY(-50%);color:rgb(var(--latent) / .58)}
.rail .seg{font-style:normal;position:absolute;left:calc(-1px + var(--lane) * 5px);width:3px;border-radius:1.5px;background:rgb(var(--latent) / .38);
  top:calc(var(--from) / var(--months) * 100%);height:calc((var(--to) - var(--from)) / var(--months) * 100%);transition:background .5s var(--ease)}
.rail .seg b{position:absolute;left:calc(1.5rem + 1px - var(--lane) * 5px);font-weight:600;color:rgb(var(--latent));opacity:0;transition:opacity .4s var(--ease);white-space:nowrap}
.rail .seg b:first-child{top:0;transform:translateY(-50%)}
.rail .seg b:last-child{bottom:0;transform:translateY(50%)}
.rail .seg.on{background:rgb(var(--latent))}
.rail .seg.on b{opacity:1}
/* Rhombus begins where the scale begins, so its first month stands where the year label does */
.rail-y{transition:opacity .4s var(--ease)}
.rail[data-on="rhombus"] .y25{opacity:0}

/* ---------- the handovers (only with script and motion; see stage.js) ---------- */
.motion .record{margin-top:-100svh;z-index:3;pointer-events:none}
.motion .record .stage2{margin-top:0}
.motion .stage2::after{height:calc(var(--run) * 1svh)}
.motion .rail{opacity:0}
.motion.rail-on .rail{opacity:1}
.motion.rail-on .gauge{opacity:0}
.motion.close-on .gauge{opacity:0}   /* the reading is over once the back cover is up */
.gauge{transition:opacity .4s var(--ease)}

/* Pictures are laid down BY the ink: each is clipped to the part of the screen the leaning edge
   has already crossed (the stage script sets --e0 and --e1, the edge's x at the top and at the
   foot), so a picture arrives with the blade instead of waiting for the whole handover to finish,
   and goes back with it. The clip is on a wrapper that holds only pictures, never type. */
.motion .stage2.staged:not(.open) .co-pic{clip-path:polygon(0 0,var(--e0,-9px) 0,var(--e1,-9px) 100%,0 100%)}
.motion .co--wash .co-visual img{transition:transform 1.6s var(--ease)}
.motion .stage2.staged:not(.open) .co--wash .co-visual img{transform:scale(1.04)}

/* a later company's handover needs a screen tall and wide enough to hold a whole section still;
   on anything smaller those sections are simply the next thing on the page */
.motion .stage2.next{pointer-events:auto}
.motion .stage2.next::after{display:none}
.motion .stage2.next .reverse{position:relative;background:var(--ink)}
.motion .stage2.next .flood{display:none}
@media (min-width:901px) and (min-height:720px){
  .motion .co,.motion .co-in{height:100svh;min-height:0}
  .motion .stage2::after{height:calc((var(--run) + var(--dwell,0) + var(--next,0)) * 1svh)}
  .motion .record .stage2.next{margin-top:calc((var(--run) + 100) * -1svh);pointer-events:none}
  .motion .stage2.next.open{pointer-events:auto}
  .motion .stage2.next::after{display:block}
  .motion .stage2.next .reverse{position:sticky;background:linear-gradient(transparent 100svh,var(--ink) 100svh)}
  .motion .stage2.next.open .reverse{background:var(--ink)}
  .motion .stage2.next .flood{display:block}
  .motion .stage2.next.open .flood{display:none}
  /* until its stage exists, a waiting section shows nothing at all */
  .motion .stage2.next:not(.staged) .co-pic{visibility:hidden}
}

/* ---------- the back cover: why finance, then how to reach him ----------
   The page opens on the slate plate and closes on it: same ground, same display face, his name
   again. The cover's split, turned around: the question stands where the name stood, in two lines
   at the name's scale (the masthead's 8.4vw), with the byline under it; the copy fills the half the
   photograph had, set a size up so it carries that half. The two halves end level, a rule closes
   them, the routes sit under it. (A centered 58ch column and a left-packed one were both rejected
   on the 27" monitor: neither used the width. The copy itself has to span the measure.) */
.close{position:relative;z-index:4;background:var(--ground);color:var(--paper);display:flex;justify-content:center;
  padding:clamp(4rem,11vh,7.5rem) var(--gut) clamp(2.5rem,6vh,4rem)}
.close-inner{width:100%;max-width:var(--measure);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,6rem);align-items:start}
.close-h{margin:0;text-transform:uppercase;font-size:clamp(3.2rem,8.4vw,12rem);line-height:.84;color:var(--paper)}
.close-h span{display:block}
.close-by{margin-top:clamp(1.5rem,3vh,2.5rem)}
.close-body{min-width:0}
.close-body p{margin:0 0 1.1em;font-size:clamp(1.15rem,1.55vw,1.7rem);line-height:1.5;color:rgb(var(--latent) / .88)}
.close-body p:last-child{margin-bottom:0}
.close-rule{grid-column:1/-1;border:0;border-top:1px solid rgba(239,242,244,.2);margin:clamp(2.5rem,6vh,4rem) 0 clamp(1.75rem,3.5vh,2.75rem)}
.close-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s5) var(--s6)}
.col-name{margin:0;font-family:"Bricolage Var","Bricolage Grotesque",sans-serif;font-variation-settings:"wdth" 88;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1}
.col-sub{margin:var(--s3) 0 0;font-size:.88rem;line-height:1.5;color:rgba(239,242,244,.74)}
.col-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5)}
.col-cta{display:inline-flex;align-items:center;gap:var(--s3);padding:1rem 1.75rem;text-decoration:none;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;background:var(--paper);color:var(--ink);
  transition:background .4s,color .4s,transform .4s var(--ease)}
.col-cta svg{width:.8125rem;height:.8125rem}
.col-cta:hover{transform:translateY(-2px);background:var(--copper);color:#1B232C}
.col-link{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,242,244,.82);
  text-underline-offset:6px;text-decoration-thickness:1px;padding:.5rem 0}
.col-link:hover{color:var(--paper);text-decoration-thickness:2px}
.close a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* the client's laptop is 1440x900; compress the column so the stat at its foot never clips */
@media (min-width:901px) and (max-height:900px){
  .co-in{padding-top:clamp(2.25rem,5vh,4.25rem);padding-bottom:clamp(1.75rem,4vh,3rem)}
  .co-points{margin-top:clamp(1rem,2.4vh,1.6rem)}
  .co-points li{padding:clamp(.5rem,1.1vh,.8rem) 0}
  .co-points .txt{font-size:.98rem;line-height:1.42}
  .co-stat b{font-size:clamp(2.75rem,4.4vw,4.75rem)}
}

/* ---------- a phone ----------
   Everything stacks: the rail goes, the text column then the picture then the stat, the close and
   the outside rows in one column. The first Cut still runs (one screen of scroll); the later
   handovers are gated off in _tail.part, so the sections that follow simply scroll. Judged at 390,
   430 and 768 on 2026-09-21. */
@media (max-width:900px){
  .close-inner{grid-template-columns:1fr}
  .close-h{font-size:clamp(2.4rem,12vw,4rem)}
  .close-lead{margin-bottom:var(--s5)}
  .close-by{margin-top:var(--s4)}
  .close-rule,.close-foot{grid-column:1}
  .close-foot{flex-direction:column;align-items:flex-start}
  /* the button takes its own line at its own width; the three text routes share the next one */
  .col-links::after{content:"";flex-basis:100%;height:0;order:1}
  .col-cta{order:0}
  .col-link{order:2;padding:.85rem 0}   /* a 44px row under a thumb */
  .rail-wrap{display:none}
  /* the first Cut still runs here. Its desktop run (150svh) left the section pinned and still once
     the blade had crossed a phone's width, so on a phone it gets one screen of scroll and no more */
  .stage2.first{--run:100 !important}
  .co,.co-in{min-height:0}
  .co{padding-bottom:var(--s6)}
  .co-in{flex-direction:column;padding:var(--s7) var(--gut) var(--s6)}
  .co-text{flex:none}
  .co-points li > b{flex-basis:5.25rem}
  .co .co-stat{position:static;align-items:flex-start;text-align:left;margin:var(--s7) var(--gut) var(--s6)}   /* room between the picture and the figure */
  .co-pic{position:static}
  .co .co-visual{position:relative;inset:auto;left:auto;width:auto;margin:0 var(--gut);padding:0;transform:none;border-left:0;box-shadow:none;background:none;overflow:visible;display:block}
  .co .co-visual img{position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transform:none;background:#1E2731;box-shadow:inset 0 0 0 1px rgb(var(--latent) / .22)}
  .co--plate .co-visual img{object-fit:contain;padding:var(--s4)}
  .co .co-visual::after{display:none}
  .co .co-visual figcaption{padding-left:0;padding-right:0}
  .motion .co-pic{clip-path:none !important}
}
@media print{
  .co,.co-in{min-height:0;height:auto}
  .co *{opacity:1 !important;clip-path:none !important}
  .rail-wrap{display:none}
  .motion .record{margin-top:0}
  .motion .record .stage2.next{margin-top:0}
}