@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Light by choice, not by default. One ground, one ink, two greys.
   The paper is warm off-white rather than #fff so the black sits on it
   instead of vibrating against it. */
:root {
  --paper: #fbfbfa;
  --ink:   #0f0f0e;
  --muted: #6f6f6a;   /* quiet, but still 4.9:1 on the paper - everything here is meant to be read */
  --rule:  rgba(15, 15, 14, 0.22);
  color-scheme: light;
}

html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-inline: clamp(20px, 6vw, 72px);
  padding-block: clamp(40px, 9vh, 120px) 56px;
  min-height: 100vh;
  box-sizing: border-box;
}
main {
  max-width: 600px;
  display: block;
}

h1 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -0.01em;   /* negative on the larger type */
}
.line {
  margin: 0;
  color: var(--muted);
  max-width: 30em;
  text-wrap: balance;
}

/* With Now and Then gone there is one label left, so a gutter column existing
   to hold it pushed every list right for no reason. The label sits above its
   own list and everything shares one left edge: name, intro, rows, links. */
section { display: block; }
.label {
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.02em;    /* positive on the small type */
  margin: 0 0 10px;
}
.label:empty { display: none; }

ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* The one-is move: every row sits quiet, and the row you are on lifts to full
   ink while the rest stay down. Colour is inherited from the row so name,
   description and years all move together.

   one-is can wash its litany out to near-invisible because those lines are
   atmosphere. These say what the things actually are, so the resting state
   stays readable and the lift does the work instead. */
/* Name, then the years right behind it. Pushing the years to the far edge of a
   600px row left a canyon where the descriptor used to be, which read as a
   missing column rather than a deliberate one. */
li {
  display: grid;
  grid-template-columns: 12em max-content;
  justify-content: start;
  gap: 6px 24px;
  align-items: baseline;
  color: var(--muted);
  transition: color 140ms ease;
}
li:focus-within { color: var(--ink); }


.role, .years { color: inherit; }
.years { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* No underlines. The whole row lifts on hover instead, so the name and the
   years move together rather than the name being marked and the year not. */
a {
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease;
}
a:hover, a:focus-visible { outline: none; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }



@media (prefers-reduced-motion: reduce) {
  li, a { transition: none; }
}



/* The intro carries the same light as the list: paragraphs sit quiet, the one
   under the cursor lifts. One is lit at random on load so the block is never
   uniformly grey. */
.intro { display: flex; flex-direction: column; gap: 18px; max-width: 30em; }
.intro p {
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
  transition: color 140ms ease;
}
.intro p.lit { color: var(--ink); }

/* the intro is the one thing that still answers to a cursor. Everything below
   it answers to the scroll and only the scroll. */
@media (hover: hover) and (pointer: fine) {
  .intro p:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) { .intro p { transition: none; } }

/* The one inline link in the intro. The no-underline rule above is about list
   rows, which lift as a whole; a word inside a sentence has nothing to lift, so
   it marks itself instead. The underline fades in on colour rather than
   appearing, so the line never reflows. */
.intro a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 140ms ease;
}
.intro a:hover,
.intro a:focus-visible { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) { .intro a { transition: none; } }

/* ---- the shell ----
   Film on the left, text on the right, and the pair centred in the viewport
   rather than pinned to the left edge. one-is.com's arrangement. */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 600px);
  gap: 64px;
  align-items: start;
}
@media (min-width: 1120px) {
  /* one-is.com's actual arrangement, measured: the text column is centred in
     the viewport and the film sits out in the left gutter, outside it. Centring
     the two together as a pair pushes the text right of centre, which is what
     was wrong before. */
  .shell { display: block; position: relative; }
  main { max-width: 700px; margin-inline: auto; }

  /* Stuck. The film holds one place on the left and only its contents change.
     Text stays centred in the viewport on its own; the film is not part of that
     centring, which is how one-is reads balanced with the image hard left. */
  .detail {
    position: fixed;
    /* The panel takes whatever the gutter actually gives it rather than one
       hardcoded 290. Two things were wrong with the fixed number: below about
       1230 the panel already sat on top of the text column at its resting
       slot, and above it a wide screen left the gutter half empty while a
       landscape film sat at 163px tall. This fills the gutter, keeps 26px
       clear of the text, and stops growing at 520. */
    width: clamp(162px, calc(((100vw - 700px) / 2 - 52px) * 0.85), 442px);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .detail.thrown { cursor: grabbing; }
}

/* The film centres itself on whichever row is lit, the way one-is parks its
   image level with the active line. */
.detail {
  /* position is set per breakpoint below; leaving it here overrode the
     desktop rule, since a media query adds no specificity */
  display: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
@media (prefers-reduced-motion: reduce) { .detail, .what { transition: none; } }

.detail-img {
  /* No crop and no forced shape: the width is fixed and the height follows
     whatever the film actually is, so a vertical one stands tall and a
     landscape one sits wide. The panel is fixed and carries no caption on
     desktop, so a changing height costs nothing. */
  width: 100%;
  height: auto;
  overflow: hidden;
  /* No fill behind the media. It was a placeholder for loading, invisible while
     every film was opaque, and it became a grey rectangle the moment one of
     them had a real transparent background. */
}
.detail-img.empty { visibility: hidden; }   /* holds its place so the sentence stays put */
.detail-img img,
.detail-img video {
  width: 100%;
  height: auto;
  display: block;
}
.detail-text {
  margin: 0;
  color: var(--muted);
  max-width: 30em;
  text-wrap: pretty;
  /* three lines held open, so the block does not change height as the
     sentence changes length from one row to the next */
  min-height: calc(4 * 1.55em);
}

/* The sentence rides in the row itself, so it is in the markup with or without
   JS. Wide screens hand it to the panel; narrow screens read it in place. */
.what {
  grid-column: 1 / -1;
  color: var(--muted);
  max-width: 34em;
  text-wrap: pretty;
}
@media (min-width: 1120px) {
  .what { display: none; }
}
@media (max-width: 420px) {
  li { grid-template-columns: 1fr max-content; }
}
li.lit { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Phones. Most people arrive here on one, so this is the main case, not a
   fallback. There is no panel and no hover, so each row carries its own film.
   --------------------------------------------------------------------------- */
.rowfilm { display: none; }

/* ---------------------------------------------------------------------------
   Phones, following one-is.com: large type, everything muted with one line
   live, and the film floating over the right-hand side rather than sitting in
   the column. A little smaller than theirs.
   --------------------------------------------------------------------------- */
@media (max-width: 1119px) {
  body {
    font-size: 26px;
    line-height: 1.32;
    letter-spacing: -0.02em;
    padding-inline: clamp(18px, 7vw, 34px);
    padding-block: 42px 120px;
  }
  main { gap: 72px; max-width: none; }

  .intro { gap: 40px; max-width: none; }
  .intro p { text-wrap: initial; }

  h1 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 36px; }
  .label { font-size: 13px; letter-spacing: 0.06em; margin-bottom: 24px; }

  ul { gap: 30px; }
  li {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px 18px;
    align-items: baseline;
    color: var(--muted);
  }
  .years { font-size: 15px; letter-spacing: 0; }

  /* the sentence stays, at reading size, under the name it belongs to */
  .what {
    display: block;
    grid-column: 1 / -1;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    margin-top: 2px;
    max-width: 34em;
    min-height: calc(4 * 1.5em);   /* every row the same, so the gaps are equal */
    opacity: 0;
    transition: opacity 180ms ease;
  }
  li.lit .what { opacity: 1; }

  .rowfilm { display: none; }          /* films no longer sit inside the rows */

  /* one-is floats its media over the text on the right */
  /* A corner piece, not a slab across the middle of the sentence you are
     reading. Smaller too, since it sits over the page rather than beside it. */
  .detail {
    display: block;
    position: fixed;
    width: 38vw;
    max-width: 176px;
    z-index: 5;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  /* the rule that reveals the panel lived only in the desktop block, so the
     film was positioned correctly here and invisible */
  .detail[aria-hidden="false"] { opacity: 1; }
  .detail-text { display: none; }
  .detail-img {
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }


  /* The links are secondary to the ventures, and at 26px "jasondadi@gmail.com"
     runs to the edge of a 393 screen and off a narrower one. */
  .chapter-links li {
    font-size: 18px;
    letter-spacing: -0.01em;
    gap: 6px 16px;
  }
  .chapter-links ul { gap: 18px; }
}

@media (max-width: 560px) {
  .label { font-size: 13px; }
}

/* Elsewhere has no films, so its rows stay tight */


/* Kept last on purpose: these override base rules that sit further up, and a
   media query carries no extra specificity, so order is the only thing
   deciding it. Three separate fixes lost that fight before this moved. */
@media (min-width: 1120px) {
  .detail { display: block; }
  .detail[aria-hidden="false"] { opacity: 1; }

  /* A vertical film is nine units tall for every five across, so once the
     panel is allowed to widen, the tall ones would run off the bottom of the
     screen before the wide ones got anywhere near big enough. The height is
     capped and the width follows it, which lets the landscape films take the
     whole gutter while the vertical ones stay the size they already were. */
  .detail-img { display: flex; justify-content: center; }
  .detail-img img,
  .detail-img video {
    width: auto;
    max-width: 100%;
    max-height: 66vh;
  }

  /* Film and words are separate things now. The film holds the left edge and
     says nothing; each sentence sits in its own row, to the right of the name
     it belongs to, which is where it was before any of this had video. */
  .detail-text { display: none; }

  /* The column is sized by the intro, which is the widest thing that is always
     on screen, so the block reads centred. A third grid column for the sentence
     made the column 880 wide while its content filled about 700 of it, which
     pushed everything left of centre and ran the column into the film. */
  li {
    position: relative;
    grid-template-columns: 11em 7.5em;
    gap: 4px 30px;
    justify-content: start;
    align-items: baseline;
  }
  /* The sentence hangs out of flow, into the empty margin on the right. Rows
     stay one line tall and evenly spaced whatever the sentence's length, and
     nothing reflows when one appears. */
  .what {
    display: block;
    position: absolute;
    left: calc(11em + 7.5em + 60px);
    top: 0;
    width: 30em;
    max-width: none;
    opacity: 0;
    transition: opacity 180ms ease;
  }
  li.lit .what { opacity: 1; }
  ul { gap: 46px; }
}

/* ---------------------------------------------------------------------------
   Three chapters, and the scroll wraps
   ---------------------------------------------------------------------------
   The page is one reel of three screens: the words, the work, the ways to
   reach him. Past the last one it comes back round to the first. Two identical
   copies sit in the reel and the scroll position jumps by exactly one copy's
   height at the seam, so the pixels either side of the jump are the same and
   the wrap is not visible.
   --------------------------------------------------------------------------- */
.reel { display: block; }

.chapter {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 12vh;
}
@supports not (min-height: 100svh) { .chapter { min-height: 100vh; } }

.chapter > * { width: 100%; }
.chapter-links { gap: 0; }

/* the intro paragraphs no longer need their own block spacing on top of the
   chapter's own centring */
.chapter-intro header { display: block; }

@media (max-width: 1119px) {
  .chapter { padding-block: 14vh; min-height: 100svh; }
}

/* the copy that exists only to make the seam invisible */
.set[aria-hidden="true"] { pointer-events: none; }

/* The title sits on its own line above the sentence, same grey, a step smaller. */
.what .title,
.detail-text .title {
  display: block;
  font-size: 0.85em;
  margin-bottom: 2px;
}

/* Laptop widths between the phone and the wide layout: the rows were packed
   tight enough that the lit row changed almost on every scroll tick. */
@media (min-width: 700px) and (max-width: 1119px) {
  .chapter-work ul { gap: 52px; }
}