/* /updates: the developer's journal. Built by dev/build-updates.mjs, loaded after site.css, pages.css and inner.css.
   Updates happens at night. The contents page is one sheet of night glass: the newest post given a spread (title at
   display size, the summary as a standfirst, the opening paragraph set in two columns), then everything earlier as a
   typeset list with the dates in the margin. A post is one reading column on the same glass, a dateline at the top
   and a signature at the bottom, like a letter. The only ornament is the sky's own pixel: small glacier squares mark
   list items, section breaks and the edge of a quotation.
   Everything here is scoped to .up so the shared layers can change underneath it. No backdrop-filter (the sky is
   live behind every sheet), no new script. */

.up {
  --up-ink: #F4F6FB; --up-ink-2: rgba(226, 234, 250, .84); --up-ink-3: rgba(226, 234, 250, .6);
  --up-rule: rgba(178, 200, 240, .15); --up-line: rgba(178, 200, 240, .2); --up-link: var(--glacier-300, #b2c8f0);
  /* night glass, a touch denser than the site's .72 so long reading never has a star twinkling through a word */
  --up-glass: rgba(8, 20, 52, .8);
  --up-px: var(--glacier-500, #8fb2f5);       /* the pixel */
  --up-w: 1080px; --up-pad: clamp(22px, 5.6vw, 72px); --up-r: 30px;
}
/* a post: a 640px reading column (about 68 characters of 19.5px Geist) inside its sheet */
.up-post { --up-w: 840px; --up-pad: clamp(20px, 7.4vw, 100px); }
.up :focus-visible { outline: 2px solid var(--up-px); outline-offset: 3px; border-radius: 6px; }

/* ================================================================ the sheet */
.inner .up .up-sheet { position: relative; max-width: var(--up-w); margin: clamp(48px, 7vh, 76px) auto 0; border-radius: var(--up-r);
  background: var(--up-glass); color: var(--up-ink); box-shadow: inset 0 0 0 1px var(--up-line), 0 50px 110px -50px rgba(2, 8, 30, .85); }
/* the contents sheet is a <section> straight under <main>; the homepage's section padding is not for it */
.inner .up .up-log { padding: 0; }
/* The page's one moment: the sheet rises into place under the headline as the page opens. It is a CSS animation, not
   a scroll reveal, because a sheet this tall never crosses the site's reveal threshold until you have already started
   scrolling (so the letter would be missing from the first screen). No blur: an animated blur over this much text is
   the one thing not to do. Without script or with reduced motion it is simply there. */
@keyframes up-rise { from { opacity: 0; transform: translateY(48px); } }
.up .up-sheet { animation: up-rise 1300ms var(--enter) 420ms both; }
.js .up .up-pager[data-rv] { filter: none; transform: translateY(32px); }
.js .up .up-pager[data-rv].in { transform: none; transition: opacity 1000ms var(--enter), transform 1200ms var(--enter); transition-delay: calc(var(--rd, 0) * 1ms); }
.inner .up.page { padding-bottom: clamp(48px, 9vh, 104px); }

/* ================================================================ headers on the sky */
.inner .up .page-h { max-width: var(--up-w); }
.up-feed a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.up-feed svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.up-feed svg circle { fill: currentColor; stroke: none; }
.up-feed a span, .up-feed a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.up-feed a:hover { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); }
.up-feed-mast { margin-top: 22px; }
.up-feed-mast a { opacity: .9; }
.up-feed-mast a:hover { opacity: 1; }

/* ================================================================ contents: the spread */
.up-lead { position: relative; padding: clamp(26px, 4.6vw, 60px) var(--up-pad) clamp(30px, 4.6vw, 58px); }
.up-lead-k { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--up-ink-3); }
.up-lead-k span { color: var(--up-ink); font-weight: 500; letter-spacing: -.01em; }
.up-lead-k span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; background: var(--up-px); vertical-align: middle; }
.up-lead-k time, .up-row-m time, .up-facts time { font-size: 13px; letter-spacing: .01em; }
.up-lead h2 { margin-top: clamp(30px, 4.6vw, 60px); max-width: 11.5em; font-size: clamp(42px, 6vw, 84px); font-weight: 500; letter-spacing: -.055em; line-height: .96; text-wrap: balance; }
.up-lead h2 a { color: inherit; text-decoration: none; }
/* the whole spread is the title's link (the opening paragraph has its links taken out for that reason) */
.up-lead h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--up-r) var(--up-r) 0 0; }
.up-lead h2 a:focus-visible { outline: 0; }
.up-lead:has(h2 a:focus-visible) { outline: 2px solid var(--up-px); outline-offset: -2px; border-radius: var(--up-r) var(--up-r) 0 0; }
.up-dek { margin-top: clamp(18px, 2.4vw, 28px); max-width: 27em; font-size: clamp(19px, 1.75vw, 25px); line-height: 1.4; letter-spacing: -.018em; color: var(--up-ink); text-wrap: pretty; }
.up-lead-x { margin-top: clamp(30px, 4.4vw, 52px); padding-top: clamp(26px, 3.4vw, 38px); border-top: 1px solid var(--up-rule); columns: 2 300px; column-gap: clamp(32px, 4.6vw, 64px); }
.up-lead-x p { font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.7; color: var(--up-ink-2); text-wrap: pretty; hanging-punctuation: first; }
.up-lead-go { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: clamp(26px, 3.4vw, 40px); }
.up-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--up-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(178, 200, 240, .35); transition: text-decoration-color var(--quick); }
.up-more svg, .up-pg-k svg, .up-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ui) var(--enter); }
.up-lead:hover .up-more { text-decoration-color: currentColor; }
.up-lead:hover .up-more svg { transform: translateX(3px); }
.up-lead-m { font-size: 14px; color: var(--up-ink-3); }

/* ================================================================ contents: everything earlier */
.up-earlier { margin: 0 var(--up-pad); padding: clamp(26px, 3vw, 34px) 0 clamp(8px, 1vw, 12px); border-top: 1px solid var(--up-line); font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--up-ink-3); }
.up-rows { margin: 0; padding: 0 0 clamp(10px, 1.6vw, 18px); list-style: none; }
.up-rows li + li .up-row::before { content: ""; position: absolute; left: var(--up-pad); right: var(--up-pad); top: 0; border-top: 1px solid var(--up-rule); }
.up-row { position: relative; display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 56px); align-items: baseline;
  padding: clamp(24px, 3vw, 36px) var(--up-pad); transition: background-color var(--quick) var(--enter); }
.up-rows li:last-child .up-row { border-radius: 0 0 var(--up-r) var(--up-r); }
.up-row-m { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--up-ink-3); }
.up-row-m time { color: var(--up-ink-2); }
.up-row h3 { font-size: clamp(27px, 3.3vw, 44px); font-weight: 500; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.up-row h3 a { color: var(--up-ink); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.up-row h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.up-row h3 a:focus-visible { outline: 0; }
.up-row:has(h3 a:focus-visible) { outline: 2px solid var(--up-px); outline-offset: -2px; }
.up-row-w p { margin-top: 12px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--up-ink-2); text-wrap: pretty; }
@media (hover: hover) {
  .up-row:hover { background-color: rgba(178, 200, 240, .055); }
  .up-row:hover h3 a { text-decoration-line: underline; text-decoration-color: rgba(178, 200, 240, .45); }
}
.up-empty { padding: var(--up-pad); color: var(--up-ink-2); }

/* ================================================================ a post: the header */
.up-back { margin-left: -2px; }
.up-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 8px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.up-back a:hover svg { transform: translateX(-3px); }
.inner .up-post .page-h h1 { margin-top: 10px; max-width: 12em; font-size: clamp(48px, 7.2vw, 104px); }
.inner .up-post .page-h .up-dek { margin-top: clamp(20px, 2.6vw, 30px); max-width: 26em; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.42; color: #fff; text-wrap: balance; }

/* ================================================================ a post: the letter */
.up-read { padding: clamp(24px, 3.6vw, 44px) var(--up-pad) clamp(34px, 5vw, 64px); }
.up-dl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-bottom: clamp(20px, 2.6vw, 28px); border-bottom: 1px solid var(--up-rule); }
.up-by { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: var(--up-ink); text-decoration: none; }
.up-by-n { font-size: 16px; font-weight: 500; letter-spacing: -.012em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--quick); }
.up-by:hover .up-by-n { text-decoration-color: rgba(178, 200, 240, .5); }
.up-by-r { margin-top: 2px; font-size: 14px; color: var(--up-ink-3); }
.up-facts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: 14px; color: var(--up-ink-3); }
.up-facts time { color: var(--up-ink); }

/* the reading column: about 66 characters, a long line-height, paragraphs spaced like a book set in Geist */
.up-body { margin-top: clamp(30px, 4vw, 48px); font-size: clamp(17px, 1.32vw, 19.5px); line-height: 1.72; letter-spacing: -.004em; color: var(--up-ink-2);
  font-kerning: normal; font-variant-ligatures: common-ligatures; hanging-punctuation: first; }
.up-body > * + * { margin-top: 1.15em; }
.up-body p { text-wrap: pretty; }
/* the opening paragraph steps up a size, in full ink, so the letter starts like one */
.up-body > p:first-child { font-size: 1.14em; line-height: 1.6; letter-spacing: -.012em; color: var(--up-ink); }
.up-body strong { font-weight: 600; color: var(--up-ink); }
.up-body em { font-style: italic; }
.up-body a { color: var(--up-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(178, 200, 240, .42);
  transition: text-decoration-color var(--quick), color var(--quick); }
.up-body a:hover { color: #fff; text-decoration-color: currentColor; }
.up-body h2 { margin-top: 2.2em; font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.032em; line-height: 1.18; color: var(--up-ink); text-wrap: balance; scroll-margin-top: 96px; }
.up-body h3 { margin-top: 1.9em; font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--up-ink); scroll-margin-top: 96px; }
.up-body h2 + *, .up-body h3 + * { margin-top: .6em; }
.up-body ul, .up-body ol { margin-left: 0; padding: 0; list-style: none; }
.up-body li { position: relative; padding-left: 1.6em; }
.up-body li + li { margin-top: .5em; }
.up-body ul > li::before { content: ""; position: absolute; left: .2em; top: calc(.86em - 3px); width: 6px; height: 6px; background: var(--up-px); }
.up-body ol { counter-reset: up-n; }
.up-body ol > li { counter-increment: up-n; }
.up-body ol > li::before { content: counter(up-n); position: absolute; left: 0; top: .2em; font-family: var(--mono); font-size: .72em; line-height: 1.72; color: var(--up-ink-3); }
.up-body code { padding: .12em .38em; border-radius: 6px; background: rgba(178, 200, 240, .12); font-family: var(--mono); font-size: .84em; color: var(--up-ink); overflow-wrap: anywhere; }
.up-body pre { position: relative; margin-block: 1.6em; padding: 20px 22px; border-radius: 16px; background: rgba(2, 6, 22, .6); box-shadow: inset 0 0 0 1px rgba(178, 200, 240, .14);
  overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.65; color: #DCE5F6; tab-size: 2; letter-spacing: 0; }
.up-body pre code { padding: 0; background: none; font-size: inherit; color: inherit; overflow-wrap: normal; white-space: pre; }
.up-body pre[data-lang]::before { content: attr(data-lang); position: sticky; left: 0; display: block; margin-bottom: 10px; font-size: 12px; color: var(--up-ink-3); }
/* a quotation is set as a pull quote: bigger, in full ink, its edge marked by one pixel */
.up-body blockquote { position: relative; margin-block: 1.9em; padding-left: 1.6em; }
.up-body blockquote::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--up-px); box-shadow: 0 12px 0 rgba(143, 178, 245, .55), 0 24px 0 rgba(143, 178, 245, .25); }
.up-body blockquote p { font-size: clamp(21px, 2vw, 27px); font-weight: 500; line-height: 1.34; letter-spacing: -.026em; color: var(--up-ink); text-wrap: balance; }
.up-body blockquote p + p { margin-top: .7em; }
.up-body blockquote footer { margin-top: 14px; font-size: 15px; color: var(--up-ink-3); }
.up-body figure { margin: 2em 0; }
.up-body img { display: block; width: 100%; height: auto; border-radius: 16px; background: rgba(178, 200, 240, .06); }
.up-body figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--up-ink-3); text-wrap: pretty; }
/* a section break: three pixels, fading like the dither */
.up-body hr { width: 42px; height: 6px; margin: 2.6em auto; border: 0;
  background: linear-gradient(var(--up-px) 0 0) 0 0 / 6px 6px no-repeat, linear-gradient(rgba(143, 178, 245, .6) 0 0) 50% 0 / 6px 6px no-repeat, linear-gradient(rgba(143, 178, 245, .3) 0 0) 100% 0 / 6px 6px no-repeat; }
.up-body hr + * { margin-top: 0; }
/* footnotes: small numbers in the text, the notes together at the end */
.up-fn { line-height: 0; }
.up-fn a { display: inline-block; padding: 0 2px; font-family: var(--mono); font-size: .64em; font-weight: 500; color: var(--up-link); text-decoration: none; }
.up-fn a:hover { color: #fff; }
.up-notes { margin-top: 2.6em; padding-top: 22px; border-top: 1px solid var(--up-rule); font-size: 15px; line-height: 1.6; color: var(--up-ink-3); }
.up-body .up-notes-h { margin-top: 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--up-ink-2); }
.up-notes ol { margin-top: 12px; counter-reset: up-n; }
.up-notes li { scroll-margin-top: 110px; }
.up-notes li::before { top: 0; font-size: .82em; line-height: 1.95; }
.up-notes a { color: var(--up-ink-2); }
.up-fn-back { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 2px; vertical-align: middle; border-radius: 6px; }
.up-fn-back svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.up-body :target { scroll-margin-top: 110px; }
@media (min-width: 900px) {
  /* code and figures may take a little more room than the words */
  .up-body pre, .up-body figure { margin-inline: calc(var(--up-pad) * -.34); }
}

/* the signature */
.up-sign { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 22px 24px; margin-top: clamp(44px, 6vw, 68px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--up-rule); }
.up-sig { font-size: clamp(30px, 3vw, 40px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--up-ink); }
.up-thx { margin-top: 10px; font-size: 15px; color: var(--up-ink-3); }
.up-reply { display: flex; flex-wrap: wrap; gap: 8px; }
.up-reply a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; color: var(--up-ink); text-decoration: none; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(226, 234, 250, .26); transition: background-color var(--quick), box-shadow var(--quick); }
.up-reply a:hover { background-color: rgba(178, 200, 240, .1); box-shadow: inset 0 0 0 1px rgba(226, 234, 250, .42); }
.up-reply a:active { transform: scale(.97); }

/* ================================================================ older and newer: one strip, two halves */
.inner .up .up-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: var(--up-w); margin: 14px auto 0; border-radius: 26px;
  background: var(--up-glass); box-shadow: inset 0 0 0 1px var(--up-line), 0 40px 90px -50px rgba(2, 8, 30, .8); color: var(--up-ink); }
.up-pg { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 36px) clamp(24px, 2.8vw, 32px);
  color: var(--up-ink); text-decoration: none; transition: background-color var(--quick) var(--enter); }
.up-pg-old { border-radius: 26px 0 0 26px; }
.up-pg-new { border-radius: 0 26px 26px 0; align-items: flex-end; text-align: right; box-shadow: inset 1px 0 0 var(--up-rule); }
.up-pg-k { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--up-ink-3); }
.up-pg-t { font-size: clamp(21px, 2.1vw, 27px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.up-pg-s { max-width: 26em; font-size: 15px; line-height: 1.5; color: var(--up-ink-2); text-wrap: pretty; }
.up-pg-all .up-pg-t { color: var(--up-ink-2); }
.up-pg:focus-visible { outline-offset: -3px; border-radius: inherit; }
@media (hover: hover) {
  .up-pg:hover { background-color: rgba(178, 200, 240, .055); }
  .up-pg-old:hover .up-pg-k svg { transform: translateX(-3px); }
  .up-pg-new:hover .up-pg-k svg { transform: translateX(3px); }
}
.up-post > .up-feed { display: flex; justify-content: center; max-width: var(--up-w); margin: clamp(22px, 3vw, 34px) auto 0; }
.up-post > .up-feed a { color: rgba(244, 246, 251, .78); }
.up-post > .up-feed a:hover { color: #fff; }

/* ================================================================ smaller screens */
@media (max-width: 860px) {
  .up-row { grid-template-columns: minmax(0, 1fr); }
  .up-row-m { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
}
@media (max-width: 640px) {
  .up { --up-r: 24px; --up-pad: 22px; }
  .up-body > p:first-child { font-size: 1.06em; }
  .inner .up .up-sheet { margin-top: 40px; }
  .inner .up-post .page-h h1 { font-size: clamp(42px, 12.4vw, 54px); }
  .up-lead-x { columns: auto; }
  .up-dl { align-items: flex-start; }
  .up-facts { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; text-align: left; }
  .inner .up .up-pager { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .up-pg-old { border-radius: 24px 24px 0 0; }
  .up-pg-new { border-radius: 0 0 24px 24px; align-items: flex-start; text-align: left; box-shadow: inset 0 1px 0 var(--up-rule); }
  .up-sign { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .up .up-sheet { animation: none; }
  .js .up .up-pager[data-rv] { transform: none; }
}