/* THEME — PAPER
   Light, editorial, printed. The chosen headshot is black and white on a pale
   grey ground, so on bone it reads as if it were printed there rather than
   placed on top: no border, no shadow, no treatment. A serif carries the
   display and a monospace carries the furniture, which is how a printed
   document distinguishes what is said from what is filed. */

:root{
  /* The ground was #EAE6DC: red 14 points above blue, which is a lot of warmth
     and read as yellowed. #F1F0EC keeps a spread of 5, so it is still paper
     stock rather than screen white, and it sits under a black-and-white
     photograph shot on a COOL grey ground without fighting it. */
  --bone:#F1F0EC; --paper:#FBFAF8; --ink:#15171A; --soft:#4C5357;
  --dim:#7E858A; --hair:rgba(21,23,26,.15); --rule:rgba(21,23,26,.5);
  --accent:#7A4A16;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-name: clamp(2.75rem, 7vw, 6rem);
  --t-h2:   clamp(1.5rem, 2.6vw, 2.25rem);
  --t-h3:   clamp(1.1875rem, 1.6vw, 1.4375rem);
  --t-lead: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  --t-body: .9375rem;
  --t-mono: .6875rem;
  --t-sm:   .8125rem;

  --safe: clamp(1.1rem, 4vw, 3.5rem);
  --col:  76rem;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font:400 var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400;
          font-optical-sizing:auto; letter-spacing:-.014em; }
a{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.mono{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
       text-transform:uppercase; color:var(--dim); }
.wrap{ max-width:var(--col); margin:0 auto; padding-inline:var(--safe); }
/* Every block is full width and carries its own .wrap, so any block can take
   a background that reaches the page edges without breaking out of a parent.
   That is what makes the inversion interspersable, and it removes the
   break-out arithmetic that kept going wrong. */

/* --- bar ----------------------------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem var(--safe);
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--hair);
}
.bar__name{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.22em;
            text-transform:uppercase; color:var(--ink); text-decoration:none; }
.bar nav{ display:flex; flex-wrap:wrap; gap:clamp(.8rem,2.2vw,1.9rem); }
.bar nav a{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
            text-transform:uppercase; color:var(--soft); text-decoration:none; padding:.35rem 0; }
.bar nav a:hover{ color:var(--ink); }

/* --- masthead ------------------------------------------------------------ */
.mast{ padding:clamp(2.4rem,6vh,4.5rem) 0 0; }
.mast .mono{ display:block; margin-bottom:1rem; color:var(--accent); }
.mast h1{ font-size:var(--t-name); line-height:.95; max-width:12ch; }
/* A thick rule under the name and a hairline everywhere else: the masthead is
   the only place on the page that is allowed to shout, and it shouts in a
   rule rather than in type. */
.mast__rule{ height:2px; background:var(--ink); margin:clamp(1.5rem,4vh,2.4rem) 0 0; }

/* The grid belongs on .wrap, NOT on the section. The section is full width so
   that it can take a background to the page edges; .wrap is the column the
   grid divides. Put the grid on the section and its single .wrap becomes the
   only grid item, which collapses the portrait and the lead into column one
   and leaves column two empty. That shipped once. */
.intro{ padding:clamp(1.6rem,4vh,2.6rem) 0 clamp(2rem,6vh,3.6rem); }
.intro > .wrap{ display:grid; gap:clamp(1.4rem,4vw,3rem); grid-template-columns:1fr; }
@media(min-width:56rem){
  .intro > .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
}
.intro figure{ margin:0; }
.intro figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 28%; }
.intro figcaption{ margin-top:.55rem; font-family:var(--mono); font-size:var(--t-mono);
                   letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lead{ margin:0 0 1.4rem; font-family:var(--serif); font-size:var(--t-lead);
       line-height:1.42; max-width:38ch; }
.meta{ margin:0 0 1.6rem; display:grid; gap:.1rem .9rem; grid-template-columns:auto 1fr;
       max-width:34rem; }
.meta dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
          text-transform:uppercase; color:var(--dim); padding-top:.28rem; }
.meta dd{ margin:0 0 .5rem; font-size:var(--t-sm); color:var(--soft); }
.meta dd a{ color:var(--accent); text-decoration-color:var(--hair); text-underline-offset:.25em; }

.acts{ display:flex; flex-wrap:wrap; gap:.6rem; }
.btn{ display:inline-block; padding:.75rem 1.3rem; font-family:var(--mono);
      font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase;
      text-decoration:none; border:1px solid var(--ink); background:var(--ink);
      color:var(--paper); transition:.18s; }
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hair); }
.btn--ghost:hover{ background:transparent; border-color:var(--ink); }

/* --- coverage ------------------------------------------------------------ */
.strip{ padding:0 0 clamp(2rem,5vh,3rem); }
.strip .mono{ display:block; margin-bottom:1rem; }
.logos{ list-style:none; margin:0; padding:0; display:grid; align-items:center;
        grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.2rem); }
@media(min-width:34rem){ .logos{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:62rem){ .logos{ grid-template-columns:repeat(6,1fr); } }
.logos a{ display:block; line-height:0; }
.logos img{ height:clamp(28px,3.4vw,40px); width:auto; max-width:170px;
            object-fit:contain; object-position:left center;
            filter:grayscale(1) opacity(.62); transition:filter .18s; }
.logos a:hover img{ filter:grayscale(1) opacity(1); }

/* --- sections ------------------------------------------------------------ */
.sec{ padding:clamp(2.6rem,7vh,4.5rem) 0; border-top:1px solid var(--hair); }
.sec__head{ display:flex; align-items:baseline; justify-content:space-between;
            gap:1rem; margin-bottom:clamp(1.5rem,4vh,2.4rem); }
.sec__head h2{ font-size:var(--t-h2); }

/* The movements are the densest reading on the page, roughly 130 words each.
   Set in three narrow columns they were a wall: a long paragraph in a short
   measure is the one shape a reader abandons. They are rows now, label beside
   prose, with the prose held to a real measure.

   The type scale is the one that was approved. It was raised once on a
   misread of "illegible", which meant paragraphs printing on top of each
   other, not small text, and was put back.

   The label and the body are each ONE wrapper. An earlier version placed dt,
   h3 and p individually with grid-column/grid-row, which was correct while a
   thread had a single paragraph and silently overprinted every paragraph on
   top of the first once threads had three. Two children and no explicit
   placement cannot do that at any paragraph count. */
.arc{ display:grid; grid-template-columns:1fr; }
.arc > article{ display:grid; gap:.35rem clamp(2rem,5vw,4rem);
                grid-template-columns:1fr;
                padding:clamp(1.3rem,3vh,2rem) 0; border-top:1px solid var(--hair); }
.arc > article:first-child{ border-top:2px solid var(--ink); }
@media(min-width:56rem){
  .arc > article{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
}
.arc__label{ align-self:start; }
.era{ margin:0 0 .3rem; font-family:var(--mono); font-size:var(--t-mono);
      letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.arc h3{ margin:0; font-size:var(--t-h3); }
.arc__body p{ margin:0 0 1em; color:var(--soft); font-size:var(--t-body);
              line-height:1.75; max-width:66ch; }
.arc__body p:last-child{ margin-bottom:0; }


.vent{ list-style:none; margin:0; padding:0; }
.vent > li{ display:grid; gap:.3rem 2rem; grid-template-columns:1fr;
            padding:1.3rem 0; border-top:1px solid var(--hair); }
@media(min-width:56rem){
  .vent > li{ grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,3fr); align-items:baseline; }
}
.vent > li:last-child{ border-bottom:1px solid var(--hair); }
.vent h3{ font-size:var(--t-h3); }
.vent p{ margin:0; color:var(--soft); font-size:var(--t-sm); line-height:1.75; max-width:62ch; }
.vent p a{ color:var(--accent); text-decoration-color:var(--hair); text-underline-offset:.25em; }
.vent .role{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em;
             text-transform:uppercase; color:var(--dim); }

.facts{ list-style:none; margin:0; padding:0; }
.facts > li{ position:relative; padding:0 0 .9em 1.2em; max-width:66ch;
             color:var(--soft); font-size:var(--t-sm); line-height:1.75; }
.facts > li::before{ content:""; position:absolute; left:0; top:.8em;
                     width:8px; height:1px; background:var(--accent); }
.facts > li:last-child{ padding-bottom:0; }
/* CSS columns, not a two-column grid. A grid couples the two cells in a row
   to a shared height, so a short item beside a long one leaves a ragged gap
   that grows every time an item is shortened. Columns let the items flow and
   balance, and nothing is coupled to anything beside it. */
.facts--two{ columns:1; column-gap:clamp(1.5rem,4vw,3.5rem); }
@media(min-width:54rem){ .facts--two{ columns:2; } }
.facts--two > li{ break-inside:avoid; -webkit-column-break-inside:avoid; }

/* The policy list ran at half width with a figure beside it. A globe, an
   engraved earth, a banknote seal, a charter border and the ITU invitation
   itself were all drawn and all rejected: "they all suck tbh. id say remove
   because you cant figure out what works." So the list runs the full column,
   the way boards and recognition already do. Do not put anything back there
   without asking. */
.press{ list-style:none; margin:0; padding:0; }
.press > li{ display:grid; gap:.3rem 1.6rem; grid-template-columns:1fr;
             padding:1rem 0; border-top:1px solid var(--hair); }
@media(min-width:56rem){
  .press > li{ grid-template-columns:minmax(0,1fr) 7rem 5.5rem; align-items:center; }
}
.press > li:last-child{ border-bottom:1px solid var(--hair); }
.press a{ font-family:var(--serif); font-size:1.125rem; color:var(--ink);
          text-decoration:none; }
.press a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:.28em; }
/* brightness(0), not grayscale. Measured median luminance of the six source
   files with the transparent pixels excluded: Nasdaq, Bloomberg Law and
   Forbes are 0, already pure black; Cointelegraph is 184, artwork drawn for a
   dark ground; ITU 110 and WBF 128. Grayscale preserves each file's own
   lightness, so those last three stay pale on paper however far the opacity
   is lifted, which is why they read as smudges. brightness(0) forces every
   mark to true black and is a no-op on the three that already are, so the row
   becomes one uniform press wall. Alpha is untouched, so the edges stay
   soft. Operator, 2026-09-19: "1 lift them". */
.press .src img{ height:24px; width:88px; object-fit:contain; object-position:left center;
                 filter:brightness(0); }
.press .kind{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em;
              text-transform:uppercase; color:var(--dim); }

/* --- foot ---------------------------------------------------------------- */
.foot{ border-top:2px solid var(--ink); padding:2.2rem 0 3.4rem; }
.foot__row{ display:flex; flex-wrap:wrap; justify-content:space-between;
            gap:1.2rem; align-items:baseline; }
.mailto{ font-family:var(--serif); font-size:clamp(1.25rem,2.5vw,1.875rem);
         color:var(--ink); text-decoration:none; }
.mailto:hover{ color:var(--accent); }
.social{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem; }
.social a{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
           text-transform:uppercase; color:var(--dim); text-decoration:none; }
.social a:hover{ color:var(--ink); }

/* The page should END, not run out: a last line, then the contact. The rule
   it used to draw is suppressed inside .invert, where the ground change is
   the divider. */
.close{ padding:clamp(2.4rem,6vh,3.6rem) 0 0; border-top:1px solid var(--hair); }
.close p{ margin:0 auto; max-width:46ch; text-align:center; font-family:var(--serif);
          font-size:clamp(1.1875rem,1.6vw,1.5rem); line-height:1.45; color:var(--ink); }
.close .mono{ display:block; text-align:center; margin-bottom:1rem; }

/* --- the parallax band --------------------------------------------------
   ONE full-bleed frame breaks the page up, after the coverage strip. A second
   was drawn after the ventures list and cut on the operator's word: "leave
   the window effect for only the secodn image". It sits OUTSIDE .wrap rather
   than using a 100vw break-out, because 100vw includes the scrollbar and buys
   a horizontal scroll on every desktop that shows one.

   The parallax is a fixed background, and it is switched on only where a
   fixed background actually works. iOS Safari does not honour
   background-attachment:fixed; pointer:coarse is the closest honest proxy for
   that, so touch gets a clean static band instead of a broken one.
   ------------------------------------------------------------------------ */
.band{
  min-height:clamp(16rem, 44vh, 28rem);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 32%;
  border-block:1px solid var(--hair);
}
.band--profile{
  background-image:url("/assets/band_tilt.jpg");
  background-image:image-set(url("/assets/band_tilt.jpg") 1x,
                             url("/assets/band_tilt@2x.jpg") 2x);
}

@media (hover:hover) and (pointer:fine){
  .band{ background-attachment:fixed; }
}
@media (prefers-reduced-motion:reduce){
  .band{ background-attachment:scroll; }
}

.copy{ margin:1.2rem 0 0; font-family:var(--mono); font-size:var(--t-mono);
       letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* --- the arc ------------------------------------------------------------
   Three eras, stated once. This replaced a row of stat tiles that counted
   capital raised and central banks briefed, which framed a career that spans
   institutional payments, open-source privacy and frontier hardware as though
   it were only the first of the three.
   ------------------------------------------------------------------------ */
.arcbar{ padding:0 0 clamp(2rem,5vh,3rem); }
.arcbar ol{ margin:0; padding:0; list-style:none; display:grid; gap:1px;
            background:var(--hair); grid-template-columns:1fr;
            border:1px solid var(--hair); }
@media(min-width:44rem){ .arcbar ol{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:68rem){ .arcbar ol{ grid-template-columns:repeat(4,1fr); } }
.arcbar li{ background:var(--bone); padding:1.1rem 1.2rem 1.3rem; }
.arcbar .mono{ margin:0 0 .5rem; }
.arcbar h2{ margin:0 0 .5rem; font-size:clamp(1.125rem,1.5vw,1.375rem);
            text-wrap:balance; }
.arcbar li > p:last-child{ margin:0; color:var(--soft); font-size:var(--t-sm);
                           line-height:1.6; }

/* --- origin, prose beside a short aside ---------------------------------- */
.two{ display:grid; gap:clamp(1.4rem,4vw,3.5rem); grid-template-columns:1fr; }
@media(min-width:56rem){ .two{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); } }
.two__prose p{ margin:0 0 1.1em; max-width:66ch; color:var(--soft);
               font-size:var(--t-body); line-height:1.75; }
.two__prose p:first-child{ color:var(--ink); }
.two__aside{ padding-top:.4rem; }
.two__aside .mono{ display:block; margin-bottom:.8rem; }
.facts--tight > li{ font-size:var(--t-sm); }
.facts b{ font-weight:500; color:var(--ink); }

/* The skip link came across with the markup but not with a rule, so it was
   rendering as visible text above the masthead. Off-screen until focused. */
.skip{ position:absolute; left:-9999px; top:0; z-index:50;
       background:var(--ink); color:var(--paper); padding:10px 16px;
       font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
       text-transform:uppercase; text-decoration:none; }
.skip:focus{ left:8px; top:8px; }

/* --- three movements in the bottom half ----------------------------------
   The page reads paper from the lede down through the record. Then it changes
   ground three times, in BLOCKS, not in stripes:

     ventures, boards, institutional     ink      what he runs and sits on
     recognition, selected press          paper    what other people said
     the close and the contact            deep ink where the page ends

   Operator, 2026-09-19 12:53pm PDT: "try venture board and policy in dark,
   then white in press and recongition, then dark again for bottom, see if
   contact can stand out". An earlier pass alternated every other section and
   was rejected: "zebra stripes is a no. it ruins the best part at the top
   which neede dnothing." The difference is block length. Three runs of three,
   two and two sections read as movements; runs of one read as stripes. Do not
   invert a single section on its own.

   The top of the page stays paper. That part was never the problem.

   Implemented as a token redefinition rather than a second stylesheet. Every
   colour on the page is a custom property, so a block restates seven of them
   and everything inside inherits, including anything added later.
   ------------------------------------------------------------------------ */
.invert{
  --bone:#14161A;
  --paper:#0E1013;
  --ink:#F1F0EC;
  --soft:#AFB5B8;
  --dim:#818A8E;
  --hair:rgba(241,240,236,.17);
  /* The accent is a dark brown chosen against bone and it disappears on ink.
     This is the same hue opened up until it reads on a dark ground. */
  --accent:#C08A3E;
  background:var(--bone);
  color:var(--ink);
  /* Two stacked blocks at fractional device-pixel offsets each antialias
     their own edge, and the light canvas composites through the overlap as a
     grey hairline: measured rgb(75,77,79) on rgb(20,22,26), which is what the
     double blend predicts. It is not a border, it varies with zoom, and no
     border property removes it. One pixel of ink painted ABOVE the block
     covers the seam without touching layout. */
  box-shadow:0 -1px 0 var(--bone);
}
/* Where the ground CHANGES, the colour is the divider and a rule on top of it
   is noise. Between two inverted sections the page keeps its own language: the
   same hairline it draws between sections on paper, which the token swap turns
   light. */
.sec:not(.invert) + .invert, .invert + .sec:not(.invert){ border-top:0; }

/* The contact address keeps the accent. It had a darker ground of its own for
   a while and that was wrong: the footer then read as a different colour from
   the dark sections above it. Same ground now, and the colour on the address
   is what marks it as the one thing to act on. */
.close .mailto, .foot .mailto{ color:var(--accent); }
.close .mailto:hover, .foot .mailto:hover{ color:var(--ink); }
/* The footer's 2px rule is the page's full stop, and it is drawn in --ink so
   that on paper it is black. Inverted, --ink is bone and a 2px bright bar cuts
   the dark tail in two. The ground change already did the work of ending the
   page, so inside the tail the footer takes the same hairline as everything
   else. */
.foot.invert{ border-top:1px solid var(--hair); }