/* What is new (James, 11 Nov 2026, of attio.com: "this is the level of depth our site needs to have"). Each day is a run of changes along
   a brushed steel rail, a silver bead for each; the newest bead holds the lime light, and a bead lights as its line is pointed at. Each line
   is a way to the page where the change shows, with the commit it came from beside it in small type. Lime is a light, never writing.
   Loaded after trade.css, on this page only. */
.nw-hero h1{max-width:11ch}
/* the first screen: the newest changes on the pane of glass that data.css draws, one line each */
.nw-art .dt-ledger b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nw-art .dt-ledger small{font-variant-numeric:tabular-nums}
.nw-sec{padding:clamp(24px,4vw,64px) 0 clamp(24px,4vw,48px);background:linear-gradient(180deg,#fff 0,#f1f2f5 30%,#fff 100%)}
.nw-days{display:grid;gap:clamp(40px,5vw,72px);width:min(100% - 64px,1040px);margin-inline:auto}
.nw-none{color:var(--soft);font-size:17px}

/* a day: its date large, the second half dimmed, and how many changes it holds */
.nw-date{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.nw-date h2{font-size:clamp(2.2rem,4.2vw,4rem);font-weight:600;line-height:1;letter-spacing:-.042em}
.nw-date p{color:var(--soft);font-size:16px}

/* the rail: brushed steel down the left, a bead at each change */
.nw-list{position:relative;display:grid;gap:6px;margin-top:clamp(18px,2.4vw,30px);padding-left:34px}
.nw-list::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--steel);box-shadow:0 0 0 1px rgba(14,18,28,.06)}
.nw-item{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:6px 18px;min-height:56px;padding:8px 16px 8px 18px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.66));box-shadow:var(--edge),0 16px 26px -22px rgba(22,30,48,.5);transition:translate .35s var(--ease),box-shadow .35s,opacity .9s var(--ease)}
.nw-item::before{content:"";position:absolute;left:-29px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,var(--silver) 72%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.16),0 0 0 1px rgba(14,18,28,.1),0 0 0 4px #fff;transition:background .35s,box-shadow .35s}
.nw-day:first-child .nw-item:first-child::before,.nw-item:hover::before,.nw-item:focus-within::before{background:radial-gradient(circle at 34% 28%,#fff,var(--accent) 62%);box-shadow:0 0 0 1px rgba(63,107,0,.4),0 0 0 4px #fff,0 0 16px 3px color-mix(in srgb,var(--accent) 80%,transparent)}
.nw-day:first-child .nw-item:first-child::before{animation:nw-glow 3.2s ease-in-out infinite}
@keyframes nw-glow{50%{box-shadow:0 0 0 1px rgba(63,107,0,.4),0 0 0 4px #fff,0 0 26px 6px color-mix(in srgb,var(--accent) 70%,transparent)}}
.nw-item time{color:var(--soft);font:500 14px/1 var(--text);font-variant-numeric:tabular-nums}
.nw-item a,.nw-item > p{display:flex;align-items:baseline;gap:8px;min-width:0;color:var(--ink);font-size:17px;line-height:1.36;letter-spacing:-.016em;text-decoration:none;text-wrap:pretty}
.nw-item a::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* the whole line is the way to its page */
.nw-item a .arr{color:var(--soft);transition:translate .3s var(--ease),color .3s}
.nw-item a:focus-visible{outline:none}
.nw-item:has(a:focus-visible){box-shadow:0 0 0 2px var(--ink)}
.nw-item code{color:var(--faint);font:500 12px/1.4 var(--mono);text-align:right}
@media (hover:hover) and (pointer:fine){
  .nw-item:hover{translate:4px 0;box-shadow:0 0 0 2px var(--accent),0 0 0 3px rgba(63,107,0,.3),0 0 24px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
  .nw-item:hover .arr{translate:3px 0;color:var(--ink)}
}
/* the lines of a day arrive one after another as they are scrolled to (trade.css hides them until then) */
.js .nw-item[data-rise]{transition-delay:calc(var(--i) * 60ms)}
.js .nw-item[data-rise][data-in]{transition-delay:0s}

.new-page .l-copy h2{max-width:14ch}

@media (max-width:899px){
  .nw-days{width:calc(100% - 24px)}
  .nw-list{padding-left:26px}
  .nw-list::before{left:7px}
  .nw-item{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"time code" "line line";padding:10px 14px 12px}
  .nw-item::before{left:-23px;top:22px;margin-top:0;width:12px;height:12px}
  .nw-item time{grid-area:time}
  .nw-item code{grid-area:code}
  .nw-item a,.nw-item > p{grid-area:line;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .nw-day:first-child .nw-item:first-child::before{animation:none}
  .nw-item{transition:none}
}