/* Anopticon. One dark ground. Each page opens on a painting; below it the text runs as one folio: a margin for the
   headings, one column for the words, and one line between them that runs down the whole page. The orange mark on the
   line shows where the reader is. Orange (International Orange) for that mark, links and one thing at a time. */

/* Fonts, served from this site (SIL Open Font License, Latin subset from Google Fonts). Variable files: one file
   covers every weight of its family. */
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(/assets/fonts/big-shoulders-display-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Stencil Display'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/big-shoulders-stencil-display-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/martian-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --black: #0A0A0A;
  --panel: #111110;
  --white: #F4F2EE;
  --text: rgba(244, 242, 238, .86);
  --dim: #9E9A93;
  --line: #2A2A2A;
  --orange: #FF4F00;
  --gilt: #D9A75A;
  --wine: #6B1B33;

  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", sans-serif;
  --display: "Big Shoulders Display", sans-serif;

  /* five sizes do the work below the painting */
  --s-small: 14px;
  --s-text: clamp(17px, 1.25vw, 19.5px);
  --s-lede: clamp(21px, 1.9vw, 29px);
  --s-h: clamp(28px, 2.7vw, 46px);
  --s-big: clamp(44px, 5.4vw, 92px);

  /* the folio: the page margin, the margin column for headings, the text column, the space between sections */
  --m: clamp(24px, 6vw, 104px);
  --rail: clamp(12rem, 24vw, 22rem);
  --col: 50rem;
  --into: clamp(24px, 3.4vw, 56px);
  --gap: clamp(64px, 8vw, 136px);

  --ink-h: rgba(244, 242, 238, .92); --ink-line: rgba(244, 242, 238, .8); --ink-link: rgba(244, 242, 238, .74); --ink-credit: rgba(244, 242, 238, .42);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t0: 1;
  interpolate-size: allow-keywords;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); scrollbar-color: #333 var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font: 400 var(--s-text)/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--orange); color: var(--black); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 30; background: var(--orange); color: var(--black); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--m); max-width: 1680px; margin-inline: auto; }

/* ------------------------------------------------------------------------------------------------- nav */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 3vh 6vw; color: var(--white); }
.nav__mark { font: 800 min(1.8vw, 3vh)/1 var(--stencil); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.nav__links { margin-left: auto; display: flex; gap: 1.8vw; font: 500 max(13px, min(1.2vw, 2.15vh))/1 var(--sans); }
.nav__links a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; color: var(--ink-link); transition: color .3s, border-color .3s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--white); border-bottom-color: var(--orange); }
.nav__toggle { display: none; margin-left: auto; background: none; color: inherit; border: 1px solid currentColor; padding: 9px 13px; font: 600 13px/1 var(--mono); cursor: pointer; }
.home .nav { display: none; }

/* ------------------------------------------------------------------------------------------------- the painting */
.hero { position: relative; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; overflow: hidden; isolation: isolate;
  background: var(--black) var(--lqip, none) no-repeat; background-size: cover; background-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%); }
.hero picture { position: absolute; inset: 0; z-index: -3; }
.hero .hero__glowpic { z-index: auto; pointer-events: none; }   /* it covers the screen; clicks must reach the links */
/* The painting always covers the screen. A tall painting on a wide screen becomes a detail of itself; on a phone it is
   seen nearly whole. --t runs from 0 on a tall phone to 1 on a wide screen (set in the head from the window's shape;
   without script 0 in portrait, 1 otherwise), and the focal point slides with it from the phone one (--mx, --my) to the
   wide one (--fx, --fy). */
.hero__img, .hero__glow { --tt: var(--t, var(--t0)); --px: calc(var(--mx, .5) + (var(--fx, .5) - var(--mx, .5)) * var(--tt));
  --py: calc(var(--my, .5) + (var(--fy, .5) - var(--my, .5)) * var(--tt));
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: calc(var(--px) * 100%) calc(var(--py) * 100%); transform-origin: calc(var(--px) * 100%) calc(var(--py) * 100%);
  will-change: transform; animation: drift 48s cubic-bezier(.2, .6, .2, 1) both;
  /* with a mouse it also leans a little away from the cursor, never more than its zoom has grown */
  translate: var(--dx, 0) var(--dy, 0); transition: translate 1.6s cubic-bezier(.2, .6, .2, 1); }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.1); } }
/* Light: a small blurred copy sits over the painting in screen blend, so bright passages glow into their surroundings
   the way they do in the paint. Its strength is 1/phi = 0.618, the golden ratio's conjugate. */
.hero__glow { z-index: -2; pointer-events: none; mix-blend-mode: screen; opacity: .42; }
.js .hero__img { opacity: 0; transition: opacity .9s ease, translate 1.6s cubic-bezier(.2, .6, .2, 1); }
.js .hero__glow { opacity: 0; transition: opacity 1.4s ease, translate 1.6s cubic-bezier(.2, .6, .2, 1); }
.js .hero__img.is-in { opacity: 1; }
.js .hero__glow.is-in { opacity: .618; }
/* the painting steps back as the page leaves it: moved with `top`, never a transform on the <picture>, which would
   isolate the glow's screen blend and leave a blur on top */
.js .hero__img, .js .hero__glow { top: var(--sy, 0); }
.js .hero__text { opacity: var(--so, 1); }
/* the shade: only under the words and behind the nav, and a fine grain so the paint feels like paint */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 10, .74) 0%, rgba(10, 10, 10, .3) 28%, rgba(10, 10, 10, 0) 52%),
    linear-gradient(to bottom, rgba(10, 10, 10, .32) 0%, rgba(10, 10, 10, 0) 16%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.home .hero::before { background: linear-gradient(to right, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, .3) 34%, rgba(10, 10, 10, 0) 60%),
  linear-gradient(to top, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 40%); }
/* Docs: Vermeer's carpet is busy under the title, so the shade comes up from the bottom left */
.hero:has(img[src*="/docs-"])::before { background: linear-gradient(to top, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .55) 30%, rgba(10, 10, 10, 0) 55%),
  linear-gradient(to right, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 50%), linear-gradient(to bottom, rgba(10, 10, 10, .32) 0%, rgba(10, 10, 10, 0) 16%); }

/* The words on the painting are sized by the window, never by pixels, so zooming scales the whole composition
   and it always fits exactly one screen. */
.hero__text { width: 100%; min-width: 0; padding: 0 6vw max(9vh, 64px); }
.hero__h { font: 800 min(11vw, 20vh)/.86 var(--stencil); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; color: var(--ink-h); }
.home .hero__h { font-size: min(12.5vw, 22vh); }
.hero__line { margin-top: 2.6vh; font-size: max(15px, min(1.6vw, 2.8vh)); line-height: 1.3; max-width: 34em; color: var(--ink-line); }
.hero__line .link { color: var(--white); text-decoration-color: var(--orange); text-underline-offset: .2em; }
.hero__credit { position: absolute; right: 6vw; bottom: 2.4vh; max-width: 26vw; text-align: right; font: 400 max(9.5px, min(.68vw, 1.15vh))/1.3 var(--mono); color: var(--ink-credit); }
.hero__h, .hero__line, .rows--home a, .hero__credit, .nav { text-shadow: 0 1px 18px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .25); }
.hero__h, .hero__line { animation: rise 1.4s var(--ease) both; }
.hero__line { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.phead { padding: 140px var(--m) 64px; }

/* Home: the name, one line, and the ways in. Nothing below the painting. */
.rows.rows--home { margin-top: 4.5vh; max-width: max(34vw, 22em); border-top: 1px solid rgba(244, 242, 238, .28); display: grid; }
.rows.rows--home a { display: block; padding: .95vh 0; border-bottom: 1px solid rgba(244, 242, 238, .28); text-decoration: none;
  font: 500 max(14px, min(1.55vw, 2.6vh))/1.05 var(--sans); letter-spacing: -.02em; color: var(--ink-link); transition: padding .45s var(--ease), color .25s; }
.rows.rows--home a:hover { padding-left: 18px; color: var(--orange); }
.rows--home span:last-child:empty { display: none; }

/* ------------------------------------------------------------------------------------------------- the folio */
/* Every page below its painting, the documentation included: the section's heading in the margin, the words in one
   column, the line between them unbroken from the first section to the last. */
.leaf:last-of-type .folio__col, .leaf:last-of-type .folio__h { padding-bottom: calc(var(--gap) * 1.2); }
.folio { display: grid; grid-template-columns: minmax(0, var(--rail)) minmax(0, var(--col)); }
.folio__h { align-self: start; position: sticky; top: 28px; padding: var(--gap) clamp(20px, 2.6vw, 44px) 0 0;
  font: 800 var(--s-h)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; color: var(--ink-h); }
.folio__h a { text-decoration: none; }
.folio__col { min-width: 0; border-left: 1px solid rgba(244, 242, 238, .2); padding: var(--gap) 0 0 var(--into); }
/* where a section has no heading of its own, the line still runs */
.folio__h:empty { padding: 0; }

/* the words */
.folio__col > p, .folio__col .p { max-width: 36em; margin-bottom: 1.05em; color: var(--text); text-wrap: pretty; }
.folio__col > :last-child { margin-bottom: 0; }
.folio__col a:not(.btn):not(.rows a) { color: var(--white); text-decoration-color: var(--orange); text-underline-offset: .2em; }
.folio__col a:not(.btn):hover { color: var(--orange); }
.folio__col em { font-style: italic; }
.lede { font: 400 var(--s-lede)/1.3 var(--sans); letter-spacing: -.015em; color: var(--white) !important; max-width: 25em !important; margin-bottom: .9em !important; text-wrap: balance; }
.h3 { font: 800 var(--s-h)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 1.6em 0 .55em; color: var(--ink-h); }
.folio__col > .h3:first-child { margin-top: 0; }
.big { font: 800 var(--s-big)/.88 var(--stencil); text-transform: uppercase; letter-spacing: -.005em; color: var(--ink-h); margin: 0 0 .35em; }
.note { font-size: var(--s-small); color: var(--dim); }
.note a { color: var(--dim) !important; }

/* the end of a page: where to go next */
.rows { display: grid; border-top: 1px solid var(--line); margin-top: 8px; }
.rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font: 500 clamp(22px, 2.4vw, 36px)/1.1 var(--sans); letter-spacing: -.02em; color: var(--white); transition: padding .45s var(--ease), color .25s; }
.rows a span:first-child { min-width: 0; overflow-wrap: anywhere; }
.rows a span:last-child { font: 400 var(--s-small)/1.2 var(--sans); color: var(--dim); letter-spacing: 0; text-align: right; }
.rows a:hover { padding-left: 14px; color: var(--orange); }
.folio__col > .rows:not(:first-child) { margin-top: clamp(32px, 4vw, 56px); }

.buttons { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; padding: 13px 18px; border: 1px solid var(--white); color: var(--white); font: 600 13px/1 var(--mono); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.btn:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn--solid { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn--solid:hover { background: var(--white); border-color: var(--white); }
.link { color: var(--white); text-decoration-color: var(--orange); text-underline-offset: .2em; }

/* the mark on the line: beside the heading of the section being read (site.js, "The line") */
.line-mark { position: fixed; z-index: 5; left: 0; top: 0; width: 2px; height: 0; background: var(--orange); pointer-events: none; opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)); transition: transform .3s var(--ease), height .3s var(--ease), opacity .4s ease; }
.line-mark.is-on { opacity: 1; }

/* figures: a number and what it counts */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--into); margin: clamp(36px, 4vw, 56px) 0; }
.figs dt { font-size: var(--s-small); color: var(--dim); }
.figs dd { margin: 6px 0 0; font: 800 clamp(40px, 4.4vw, 76px)/.9 var(--display); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------------------------- one device per page */
/* About: PANOPTICON loses its P as it is scrolled to */
.pan { display: inline-block; white-space: nowrap; }
.pan__p, .pan__rest { display: inline-block; will-change: transform; }
.js .pan__p { transform: translateY(calc(var(--p, 0) * .55em)) rotate(calc(var(--p, 0) * 16deg)); opacity: calc(1 - var(--p, 0)); transform-origin: 50% 100%; }
.js .pan__rest { transform: translateX(calc(var(--p, 0) * var(--pw, .5em) * -1)); }
/* About: each later incident lights the law it broke */
.since { border-top: 1px solid var(--line); margin-top: 28px; }
.since li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 6px var(--into); padding: 22px 0; border-bottom: 1px solid var(--line); }
.since__when { font: 800 clamp(20px, 1.8vw, 26px)/1.1 var(--display); text-transform: uppercase; }
.since li p { color: var(--text); grid-column: 2; }
.since li p a { font-size: var(--s-small); white-space: nowrap; }
.since__law { position: relative; padding-left: 22px; color: var(--white) !important; }
.since__law::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--orange); }
.js .since__law { color: rgba(244, 242, 238, .4) !important; transition: color .8s ease .7s; }
.js .since__law::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .6s; }
.js .since li.is-in .since__law { color: var(--white) !important; }
.js .since li.is-in .since__law::before { transform: none; }
.method { display: flex; flex-wrap: wrap; gap: 0 .45em; margin-top: 8px; font: 800 var(--s-big)/.92 var(--display); text-transform: uppercase; }
.method span:last-child { color: var(--orange); }

/* Products: what is sold under the project */
.offer { border-top: 1px solid var(--line); padding: 26px 0 4px; }
.offer:first-of-type { margin-top: clamp(28px, 3vw, 44px); }
.offer__n { font: 800 var(--s-h)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.offer__n a { text-decoration: none; transition: color .3s; }
.offer__n a:hover { color: var(--orange); }
.offer__who { margin-top: 12px; color: var(--text); max-width: 36em; }
.offer__state { margin-top: 6px; font-size: var(--s-small); color: var(--dim); }

/* Partners, Join: the one line that matters, set large */
.rule { font: 800 clamp(30px, 3.6vw, 60px)/.95 var(--display); text-transform: uppercase; max-width: 16em; margin: clamp(28px, 3vw, 40px) 0 0; }

/* Questions: each answer slides open */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0;
  font: 500 var(--s-lede)/1.2 var(--sans); letter-spacing: -.02em; transition: color .25s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 var(--s-lede)/1 var(--sans); color: var(--dim); transition: transform .3s var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); color: var(--orange); }
.acc summary:hover { color: var(--orange); }
.acc details p { padding: 0 0 22px; max-width: 36em; color: var(--text); transform: translateY(-8px); opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.acc details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.acc details[open]::details-content { block-size: auto; }
.acc details[open] p { transform: none; opacity: 1; }
.sources { display: grid; gap: 8px; margin-bottom: 20px; }

/* ------------------------------------------------------------------------------------------------- documentation */
/* The same folio: the contents in the margin, the mark on the same line */
.docs__state { margin-bottom: clamp(28px, 3vw, 44px); font-size: var(--s-small); color: var(--dim); }
.docs__state span { display: inline-block; margin-right: 12px; padding: 4px 8px; border: 1px solid var(--orange); color: var(--orange); font: 400 12px/1.3 var(--mono); }
.folio--docs .folio__col { max-width: none; }
.toc { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; scrollbar-width: none; padding-top: var(--gap); }
.toc::-webkit-scrollbar { display: none; }
.toc__btn { display: none; }
.toc__in { position: relative; }
.toc__find input { width: calc(100% - 28px); margin-bottom: 22px; padding: 9px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--white); font: 400 13px/1 var(--sans); outline: none; transition: border-color .3s; }
.toc__find input:focus { border-bottom-color: var(--orange); }
.toc__find input::placeholder { color: var(--dim); }
.toc__list { position: relative; }
.toc__g { padding: 0 28px 16px 0; }
.toc__g > span { display: block; margin-bottom: 6px; font: 600 var(--s-small)/1.4 var(--sans); color: var(--dim); }
.toc__g ol a { display: block; padding: 4px 0; font-size: 15px; line-height: 1.3; text-decoration: none; color: rgba(244, 242, 238, .62); transition: color .25s, transform .5s var(--ease); }
.toc__g ol a:hover { color: var(--white); transform: translateX(3px); }
.toc__g ol a.is-on { color: var(--white); }
.toc__g.is-empty, .toc__g li.is-hidden { display: none; }
/* the contents' mark sits on the folio's line: the right edge of the margin */
.toc__mark { position: absolute; right: -1.5px; top: 0; width: 2px; height: var(--h, 0); background: var(--orange); transform: translateY(var(--y, 0));
  transition: transform .55s var(--ease), height .55s var(--ease); pointer-events: none; }

.doc { padding-top: var(--gap); scroll-margin-top: 16px; }
.doc:first-child { padding-top: 0; }
.doc__h { font: 800 var(--s-h)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; margin-bottom: 26px; }
.doc__h a { text-decoration: none; }
.doc__h a:hover { color: var(--orange); }
.doc h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.01em; margin: 40px 0 14px; scroll-margin-top: 16px; }
.doc p { margin: 0 0 16px; max-width: 36em; color: var(--text); }
.doc b { font-weight: 600; color: var(--white); }
.doc :not(pre) > code { font: 400 .8em/1 var(--mono); padding: .18em .4em; background: var(--panel); border: 1px solid #222; color: var(--white); white-space: nowrap; }
.doc td :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
.doc .buttons { margin-top: 8px; }

.code { position: relative; margin: 20px 0 24px; border: 1px solid var(--line); background: #0e0e0e; }
.code__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-bottom: 1px solid var(--line);
  font: 400 11px/1 var(--mono); color: var(--dim); }
.code__copy { background: none; border: 1px solid var(--line); color: var(--dim); padding: 7px 10px; font: 400 11px/1 var(--mono); cursor: pointer;
  transition: color .25s, border-color .25s, background .25s; }
.code__copy:hover { color: var(--black); background: var(--orange); border-color: var(--orange); }
.code__copy.is-done { color: var(--orange); border-color: var(--orange); background: none; }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 13px/1.7 var(--mono); color: rgba(244, 242, 238, .7); tab-size: 4; }
.code pre code { font: inherit; }
.t-c { color: #6f6b65; }
.t-s, .t-k, .t-n, .t-f, .t-w { color: var(--white); }
.t-w { font-weight: 600; }
.code[data-lang="json"] .t-s { color: rgba(244, 242, 238, .7); }

.tabs { margin: 20px 0 24px; }
.tabs .code { margin: 0; border-top: 0; }
.tabs__b { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-bottom: 0; }
.tabs__b button { position: relative; background: none; border: 0; border-right: 1px solid var(--line); color: var(--dim); padding: 11px 16px; cursor: pointer;
  font: 400 11.5px/1 var(--mono); transition: color .25s; }
.tabs__b button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.tabs__b button:hover, .tabs__b button[aria-selected="true"] { color: var(--white); }
.tabs__b button[aria-selected="true"]::after { transform: none; }
.tabs__p[hidden] { display: none; }
/* code in tabs: the tab names the language, so the copy button sits in the corner of the code */
.tabs .code__h { position: absolute; top: 8px; right: 8px; padding: 0; border: 0; background: none; }
.tabs .code__t { display: none; }
.tabs .code pre { padding-right: 84px; }
.tabs .code__copy { background: #0e0e0e; }

.dt { margin: 20px 0 28px; overflow-x: auto; }
.dt table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.dt th { text-align: left; padding: 0 18px 10px 0; border-bottom: 1px solid var(--line); font: 600 var(--s-small)/1.4 var(--sans); color: var(--dim); }
.dt td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
.dt td:first-child { color: var(--white); min-width: 9em; }
.dt td:last-child { padding-right: 0; }
.dt--cmd td:first-child { min-width: 0; width: 55%; }

.steps { counter-reset: s; margin: 8px 0 24px; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--line); color: var(--text); max-width: 44em; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 14px; font: 800 20px/1.2 var(--display); color: var(--orange); }
.list { margin: 8px 0 24px; }
.list li { position: relative; padding: 10px 0 10px 26px; color: var(--text); max-width: 44em; }
.list li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 12px; height: 2px; background: var(--orange); }

.flow { margin: 28px 0 32px; display: grid; gap: 10px; font: 400 12px/1.3 var(--mono); }
.flow__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flow__row--tap { padding-left: clamp(0px, 6vw, 72px); }
.flow__n { padding: 10px 12px; border: 1px solid var(--line); color: rgba(244, 242, 238, .82); }
.flow__n--dim { border-style: dashed; color: var(--dim); }
.flow__n--on { border-color: var(--orange); color: var(--orange); }
.flow__a { color: var(--dim); }

.cmds { border-top: 1px solid var(--line); }
.cmd { padding: 22px 0 6px; border-bottom: 1px solid var(--line); }
.cmd__n { margin: 0 0 8px; scroll-margin-top: 16px; }
.cmd__n code { font: 400 14px/1.6 var(--mono); color: var(--white); background: none !important; border: 0 !important; padding: 0 !important; white-space: normal !important; overflow-wrap: anywhere; }
.doc .cmd p { margin-bottom: 16px; }
.cmd .code { margin: 0 0 18px; }
.cmd .code__h { display: none; }

/* ------------------------------------------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; color: var(--dim); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: 10px var(--m); }
.foot__mail { margin-top: 6px; font-size: 13px; }
.foot__mail a { color: var(--orange); text-decoration: none; }
.foot__mail a:hover { color: var(--white); }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--white); }
.foot__links .foot__h { margin: 0; color: var(--white); font-weight: 600; }
.foot__links .sep { flex-basis: 100%; height: 0; }
.foot__legal { display: grid; padding-block: 14px; font-size: 11px; }

/* ------------------------------------------------------------------------------------------------- the vine */
/* In the outer margins, as in an illuminated page: drawn in gilt line on two fixed canvases (site.js, "The vine") */
.vine { position: fixed; top: 0; z-index: 1; pointer-events: none; display: none; filter: drop-shadow(0 0 6px rgba(217, 167, 90, .28)); }
.vine--left { left: 0; }
.vine--right { right: 0; transform: scaleX(-1); }
@media print { .vine, .line-mark { display: none !important; } }

/* Entrances: rise slowly, once */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------------------------------------- smaller screens */
@media (max-width: 900px) {
  .nav__toggle { display: inline-block; }
  .nav__links { position: fixed; inset: 0; z-index: 20; margin: 0; padding: 96px 8vw 32px; flex-direction: column; justify-content: center; gap: 2vh;
    background: var(--black); font: 800 clamp(40px, 13vw, 72px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em;
    transform: translateY(-102%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  .nav__links a { color: var(--white); }
  .nav.is-open .nav__links { transform: none; visibility: visible; transition: transform .45s var(--ease);
    background: linear-gradient(rgba(10, 10, 10, .5), rgba(10, 10, 10, .86)), var(--menu-bg, none) 50% 40% / cover no-repeat, var(--black); }
  .nav.is-open .nav__toggle { position: relative; z-index: 21; }

  /* the folio folds: the heading above its words, the line still down the left of them */
  .folio { grid-template-columns: minmax(0, 1fr); }
  .folio__h { position: static; padding: var(--gap) 0 0; margin-bottom: 22px; }
  .folio__h:empty { margin: 0; }
  .folio__col { padding-top: 4px; padding-left: clamp(16px, 4vw, 28px); }
  .leaf:last-of-type .folio__h { padding-bottom: 0; }
  .line-mark { display: none; }
  .since li { grid-template-columns: minmax(0, 1fr); }
  .since li p { grid-column: 1; }
  .foot__grid { grid-template-columns: 1fr; }

  .folio--docs .folio__col { padding-left: 0; border-left: 0; }
  .toc { position: sticky; top: 0; z-index: 6; max-height: none; overflow: visible; padding-top: 0; margin: 0 calc(var(--m) * -1) 32px; padding-inline: var(--m);
    background: rgba(10, 10, 10, .96); border-bottom: 1px solid var(--line); }
  .toc__btn { display: flex; gap: 10px; width: 100%; padding: 14px 0; background: none; border: 0; color: var(--white); font: 500 14px/1 var(--sans); cursor: pointer; text-align: left; }
  .toc__btn span { color: var(--orange); }
  .toc__btn span:not(:empty)::before { content: "/ "; color: var(--dim); }
  .toc__in { display: none; max-height: 70vh; overflow: auto; padding-bottom: 16px; }
  .toc.is-open .toc__in { display: block; }
  .toc__mark { display: none; }
  .dt table { font-size: 14.5px; }
  .doc :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
  .doc, .doc h3, .cmd__n { scroll-margin-top: 64px; }
  .docs-top { padding-top: var(--gap); }
}
@media (max-width: 640px) {
  .figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 18px; }
  .rows a { font-size: 21px; }
  /* phones: a table row becomes a card, each value under its column's name */
  .dt { overflow: visible; }
  .dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .dt td { display: block; padding: 3px 0; border: 0; min-width: 0; }
  .dt td:first-child { padding-bottom: 6px; }
  .dt td:not(:first-child)[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin: 6px 0 2px; font: 600 12px/1.4 var(--sans); color: var(--dim); }
  .dt--cmd td:first-child { width: auto; }
}

/* Portrait screens: the opening screen measured against the narrow side */
@media (orientation: portrait) {
  :root { --t0: 0; }
  .hero__h { font-size: min(17vw, 12vh); }
  .home .hero__h { font-size: min(18vw, 12vh); }
  .hero__line { font-size: max(15px, min(4vw, 2.2vh)); }
  .hero__text { padding: 0 8vw 11vh; }
  .hero__credit { left: 8vw; right: 8vw; max-width: none; text-align: left; font-size: max(9.5px, min(2.3vw, 1.2vh)); bottom: 2.2vh; }
  .nav { padding: 2.6vh 8vw; }
  .nav__mark { font-size: min(6vw, 3vh); }
  .nav__toggle { font-size: min(3.4vw, 1.8vh); padding: 1vh 2.6vw; }
  /* portrait screens get a crop made around the phone focal point, so align by that point alone */
  .hero__img, .hero__glow { --px: var(--mx, .5); --py: var(--my, .5); }
  .hero { background-position: calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%); }
  /* phone home: the shade only from below, the pages in two columns, so the middle of the painting stays clear */
  .home .hero::before { background: linear-gradient(to top, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .42) 32%, rgba(10, 10, 10, 0) 56%); }
  .hero:has(img[src*="/ananke-"])::before { background: linear-gradient(to top, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .62) 30%, rgba(10, 10, 10, 0) 52%); }
  .rows.rows--home { max-width: none; grid-template-columns: 1fr 1fr; column-gap: 6vw; margin-top: 3vh; }
  .rows.rows--home a { font-size: max(14px, min(4.3vw, 2.2vh)); padding: .9vh 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .hero__img, .hero__glow, .hero__h, .hero__line { animation: none; }
  .hero__img, .hero__glow { transform: none; translate: none; }
  .js .hero__img, .js .hero__glow { transition: none; top: 0; }
  .js .hero__text { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .since__law, .js .since__law::before { transition: none; color: var(--white) !important; transform: none; }
  .acc details::details-content, .acc details p, .toc__mark, .toc__g ol a, .line-mark { transition: none !important; }
}

/* small joins */
.docs__state + .doc { padding-top: 0; }
.big[data-pan] { font-size: clamp(56px, 9vw, 150px); }
@media (max-width: 900px) { .big[data-pan] { font-size: clamp(48px, 15vw, 120px); } }

/* footer: the plain line above the address */
.foot__what { max-width: 34em; line-height: 1.45; }
a.foot__h { text-decoration: none; }

/* Projects: three domains, set large */
.domains { display: grid; border-top: 1px solid var(--line); }
.domain { display: grid; gap: 10px; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.domain__when { font-size: var(--s-small); color: var(--dim); }
.domain__n { font: 800 clamp(72px, 10vw, 168px)/.84 var(--stencil); text-transform: uppercase; letter-spacing: -.005em; color: var(--ink-h); transition: color .35s ease, transform .6s var(--ease); }
.domain__line { font: 400 var(--s-lede)/1.3 var(--sans); letter-spacing: -.015em; max-width: 25em; color: var(--text); }
.domain:hover .domain__n, .domain:focus-visible .domain__n { color: var(--orange); transform: translateX(10px); }
@media (max-width: 640px) { .domain__n { font-size: clamp(60px, 22vw, 100px); } }

/* Nereus: two figures, set wide */
.figs--wide dd { font-size: clamp(64px, 8vw, 132px); }
.figs--wide dt { max-width: 18em; }

/* Interference: the export's own paper page (docs/interference.md), set under a painting like every page. The site gives
   it the nav, the painting and the footer; the sheet keeps its white ground, its ink and its type, on the site's margins. */
body.sheet .il-top, body.sheet .il-title { display: none; }
body.sheet .il { max-width: 1680px; padding: 0 var(--m) 12vh; }
body.sheet .il-head { padding-top: clamp(40px, 6vh, 72px); }
body.sheet .foot { background: var(--black); }

/* Research: each paper as a few numbers, what it changed, and the citation */
.stats { display: grid; border-top: 1px solid var(--line); margin-bottom: clamp(28px, 3vw, 44px); }
.stats > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px var(--into); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.stats dt { font: 800 clamp(48px, 5vw, 84px)/.9 var(--display); font-variant-numeric: tabular-nums; color: var(--ink-h); }
.stats dd { margin: 0; color: var(--text); max-width: 30em; }
.cite { display: grid; gap: 6px; margin-top: 18px; max-width: 40em; }
.cite a { font-weight: 500; color: var(--white); text-decoration-color: var(--orange); text-underline-offset: .2em; }
.cite span { font-size: var(--s-small); color: var(--dim); }
@media (max-width: 640px) { .stats > div { grid-template-columns: minmax(0, 1fr); } }