/* quiet-index */

/* ---------- Quiet index · stage ---------- */
.c-quiet-index {
  --pad: clamp(20px, 5vw, 40px);
  --c1: 6.25rem;
  --gap: 20px;
  --navspace: 72px;
  --cols: var(--c1) minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.3fr);
  /* the one measure every page reads at: her words, her timeline, her stories and her Approach page */
  --measure: 41rem;
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin-inline: auto;
  padding: calc(var(--navspace) + clamp(8px, 4vh, 56px)) var(--pad) calc(var(--dock-space) + 64px);
}
/* a case carries the second island, so the page starts a little lower */
.c-quiet-index.is-case { --navspace: 120px; }

/* the floating island: her face, her name, the pages. Light on the paper, clear of the dock. */
.c-quiet-index-nav {
  position: fixed;
  left: 50%;
  top: 12px;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 20px);
  padding: 5px 6px 5px 5px;
  border: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: 999px;
  /* Glass, at her word: it floats over a room full of her now, so what is under it shows through, blurred
     and a little lifted, and it reads as laid on the page rather than cut into it. The tint is still her own
     raised paper rather than a grey. The second island below keeps a solid back — this is the pill. */
  /* More glass, at her word (26 Oct): less of the paper's own colour in it, a wider blur so what is
     under it is suggested rather than read, and more saturation so what does come through is the page's
     colour rather than a grey. */
  background: color-mix(in oklch, var(--raised) 46%, transparent);
  -webkit-backdrop-filter: saturate(1.9) blur(26px);
  backdrop-filter: saturate(1.9) blur(26px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 1px 1px oklch(0.2 0.02 265 / 0.04),
    0 5px 12px -6px oklch(0.2 0.02 265 / 0.14),
    0 20px 40px -22px oklch(0.2 0.02 265 / 0.28);
  translate: -50% 0;
  transform-origin: 50% 0;
  transition: scale var(--d-layout) var(--ease-out);
}
.c-quiet-index-nav.is-small { scale: 0.955; }
.c-quiet-index-navlinks { position: relative; display: flex; align-items: center; gap: 2px; }
/* one indicator behind the current page: only its transform changes as the page changes */
.c-quiet-index-navdot {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 0px);
  border-radius: 999px;
  background: var(--fill);
  opacity: 0;
  transition: transform 420ms var(--spring), opacity var(--d-state) var(--ease-out);
  will-change: transform;
}
.c-quiet-index-navdot.is-on { opacity: 1; }
.c-quiet-index-navdot.is-still { transition: none; }
.c-quiet-index-navlinks a {
  position: relative;
  z-index: 1;
  min-width: 4.25rem;
  padding: 6px 12px;
  border-radius: 999px;
  font: var(--l1-font);
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-state) var(--ease-out);
}
.c-quiet-index-navlinks a[aria-current="page"] { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .c-quiet-index-navlinks a:hover { color: var(--ink); } }

/* the second island: the projects, under the first one, only while a case is open */
.c-quiet-index-projs {
  position: fixed;
  left: 50%;
  top: 60px;
  z-index: 26;
  display: flex;
  align-items: center;
  max-width: calc(100vw - 20px);
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 1px 1px oklch(0.2 0.02 265 / 0.04),
    0 5px 12px -6px oklch(0.2 0.02 265 / 0.14),
    0 20px 40px -22px oklch(0.2 0.02 265 / 0.28);
  translate: -50% 0;
  transform-origin: 50% 0;
  transition: scale var(--d-layout) var(--ease-out);
  animation: c-quiet-index-drop 260ms var(--ease-out) both;
}
.c-quiet-index-projs.is-small { scale: 0.955; }
.c-quiet-index-projs .c-quiet-index-navlinks { overflow: auto hidden; scrollbar-width: none; }
.c-quiet-index-projs .c-quiet-index-navlinks::-webkit-scrollbar { display: none; }
.c-quiet-index-projs a { min-width: 0; font: var(--l1-font); padding: 5px 11px; }
@keyframes c-quiet-index-drop {
  from { opacity: 0; translate: -50% -8px; }
  to { opacity: 1; translate: -50% 0; }
}
:root[data-motion="reduced"] .c-quiet-index-projs { animation: none; }

.c-quiet-index-intro { margin-top: clamp(40px, 8vh, 72px); max-width: 30ch; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); }
.c-quiet-index-intro .mf-sample { margin-left: 4px; letter-spacing: 0; vertical-align: 0.3em; }
/* Not here: the whole page is the way out, so its one link is underlined at rest, not only under the pointer */
.c-quiet-index-gone h1 { font: var(--h1-font); letter-spacing: var(--h1-track); color: var(--ink); }
.c-quiet-index-gone .mf-link { background-size: 100% 1px; }
/* Home opens with her own words: the first paragraph a little larger, the rest at reading size, one column. */
/* ---------- the hero ----------
   One screen, the way the collage under the timeline is one screen, so Home has a rhythm: her words, the
   timeline, the collage. The height is the window less the room the floating nav takes and the page's own top
   padding, so the first row of the timeline begins at 95vh exactly. Her paragraphs stand in the middle of it,
   and her work moves behind them. */
.c-quiet-index-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(95vh - var(--navspace) - clamp(8px, 4vh, 56px));
}
/* the bed the wake is laid on: the hero's own box, clipping at its edges, and never in the way of a pointer */
/* one piece of her work, dropped where the pointer was and fading out on its own. Placed by script; everything
   here is what it looks like, not where it is. */
/* her words sit inside the composition, over the wake, at her reading measure and centred in the hero */
.c-quiet-index-herowords { position: relative; z-index: 1; margin-inline: auto; }
.c-quiet-index-about { margin-top: 0; max-width: var(--measure); }
.c-quiet-index-about p { margin: 0; font: var(--b2-font); color: var(--body); text-wrap: pretty; }
.c-quiet-index-about p + p { margin-top: 16px; }
.c-quiet-index-about p:first-child { font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
.c-quiet-index-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 16px; font: var(--l2-font); color: var(--muted); }
.c-quiet-index-now > span:first-child { color: var(--ink); font-weight: 500; }

.c-quiet-index-sec { margin-top: clamp(56px, 10vh, 96px); }
/* the hero is a whole screen with its words centred in it, so the air under them is already there: the
   timeline begins at 95vh exactly rather than a section's margin after it */
.c-quiet-index-hero + .c-quiet-index-sec { margin-top: 0; }
.c-quiet-index-label { font: var(--l1-font); font-weight: 500; color: var(--muted); }
.c-quiet-index-sec > .c-quiet-index-label { margin-bottom: 18px; }

/* the index: a plain list of rows */
/* Nothing on this site is separated by a line any more: space does that work. The lists keep their rhythm and
   lose their rules; the timeline's own rail stays, because the rail is the timeline rather than a divider. */
.c-quiet-index-list { list-style: none; margin: 0; padding: 0; }
.c-quiet-index-row {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gap);
  align-items: baseline;
  width: calc(100% + 20px);
  margin-inline: -10px;
  padding: 16px 10px;
  border-radius: var(--r-m);
  text-align: left;
  font: var(--b3-font);
}
.c-quiet-index-years { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-quiet-index-org { color: var(--ink); font-weight: 500; }
.c-quiet-index-sub { display: contents; }

/* ---------- the career as a timeline ----------
   The years run down a rail on the left, and each era's work sits beside them at the width of the page, so the
   work is the first thing on Home. Under it, in one quiet line: the company, her role, and the outcome. The
   company's name and its picture go to the case's own page; the button under the picture opens it here. */
.c-quiet-index-time { border-top: none; }
.c-quiet-index-time .c-quiet-index-item { border-bottom: none; }
.c-quiet-index-time { position: relative; }
/* The rail is back, and it is only a rail: a hairline down the margin, a dot where each era begins, and that
   era's years on the line beside its dot. It is not the rail that was here before — there are no faded years
   waiting at the top and the foot of the window, and no inked progress beside the reading. Those were the
   navigator's job, and the navigator is at the foot of the page doing it. This is the one thing the navigator
   cannot do: say, while you are looking at the work itself, that the four of them stand in time.

   It hangs in the margin the page already has, so nothing about the column of work moves: the rail is drawn
   from each row's own box, outwards to the left. That is also why it waits for a wide enough window — see the
   rail's one media query, below. The row keeps position: relative for the fold, and now for this. */
.c-quiet-index-chapter { position: relative; }
/* The head of a row is one line, as tall as the company mark on it: the years in the margin, the mark on the rail,
   the company mark and the company name all centre against that one height, so nothing is nudged by eye and it
   still holds if the mark or the type changes size. */
/* The head of a row is one band as tall as the company mark, and the years, the mark on the rail, the company
   mark and the company name all sit on one line in it. What made the years ride high was not their glyphs but
   their box: the company name's line box had grown past the 40px band while the years' had not, so the two were
   centred against different heights. Both are given the band itself now, and the rendered glyph bands then agree
   within two thirds of a pixel — measured with a Range over the text, not off the boxes. --optical is what is
   left for the eye after that, and it is nothing. */
.c-quiet-index-chapter { --head: 40px; --rowpt: 20px; --optical: 0px; }
/* One company's work and the next one's name were close enough to read as one stretch. The air is the
   separation here — there is no rule between them — so there has to be enough of it to do the job. */
.c-quiet-index-time .c-quiet-index-chapter + .c-quiet-index-chapter { margin-top: clamp(34px, 6vh, 86px); }
/* The printed copyright, on the page that has it in the bar instead. */
.c-anatomy-lpage[data-list="home"] .c-anatomy-lfoot { display: none; }
.c-quiet-index-chapter .c-quiet-index-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  /* her sentence and the work it introduces were a hair apart; they read as two things now */
  row-gap: clamp(22px, 2.6vw, 36px);
  padding: var(--rowpt) 10px 34px;
}
/* ---------- the work, side by side ----------
   An era used to be one picture and then a long scroll to the next era. It is a strip now: the cover first,
   because that is the piece that tells the most, and behind it everything else that era actually has, each
   under the line she wrote about it.

   The strip runs off the right edge of the window rather than stopping at the measure, so the next piece is
   already half in view and nothing has to say there is more. A trackpad walks it sideways; a keyboard reaches
   it because it takes focus; the page's own scroll passes straight through it, because the one thing a strip
   inside a scrolling page must never do is take the scroll away from the page. */
.c-quiet-index-strip {
  /* the height every card in a row stands at: the cover's 16/10 at the width it is given */
  --row-h: calc(min(720px, 88vw) / 1.6);
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* matches the padding that holds the shadow, so a snapped card rests where the first one does */
  scroll-padding-left: 30px;
  /* out to the right edge of the window: 50% is half the row, which is already 10px wider than the measure */
  margin-right: calc(0px - (50vw - 50% - 10px));
  padding-right: calc(50vw - 50% - 10px);
  scrollbar-width: none;
}
/* A scroller cannot overflow on one axis and not the other: overflow-x: auto forces overflow-y to clip,
   which cut the shadow off every card flush with its top and bottom edge. The room is made inside the
   scroller and given back as margin, so the cards sit exactly where they did and the lift has somewhere
   to fall (22 Oct). */
/* Room for the cards to cast their shadow inside a scroller that must clip its cross axis. The lift is
   0 2px 4px over 0 12px 30px, so it reaches 18px above the card and 42px below it; 18px both ways was
   enough for the top and cut the bottom off, which is the half she kept seeing clipped. The left needs
   the same: the blur is 30px with no sideways offset, and the first card sat flush against the content
   edge with nothing to spill into, measured at 0px of room. The right edge already has room, from the
   padding that carries the row out to the window. The negative margins give every bit of it back, so
   the row still occupies exactly what it did. */
.c-quiet-index-strip { padding-block: 18px 42px; margin-block: -18px -42px; padding-left: 30px; margin-left: -30px; }

/* ---------- hello: her photograph, and her drawings behind it ----------
   The opening screen of the Dock exploration, kept to its first idea. She is a circle in the middle of an
   otherwise empty screen with her name under her and one sentence under that; resting on her brings her own
   drawings out from behind her, each to its own place, and taking the pointer away puts them back. */
.qi-hello { display: grid; justify-items: center; align-content: center; gap: 0;
  min-height: min(84vh, 820px); padding: 0 24px; text-align: center; }
.qi-hello-face { position: relative; width: clamp(104px, 11vw, 148px); aspect-ratio: 1; margin-bottom: 22px;
  /* Where the light is, declared here and not on the card inside: the pointer writes these onto this
     element, and a value declared on the card itself would beat the one it inherits - the card would
     have gone on using the resting light for ever. */
  --mx: 50%; --my: 30%; --holo: 0.5; }
.qi-hello-face { position: relative; width: clamp(104px, 11vw, 148px); aspect-ratio: 1; margin-bottom: 22px; }
.qi-hello-me { position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; background: var(--fill-2);
  /* The white edge her drawings are cut with, so she belongs to the same set as the ones behind her. */
  box-shadow: 0 0 0 7px var(--raised), 0 2px 5px rgb(0 0 0 / 0.04), 0 14px 34px rgb(0 0 0 / 0.08);
  transition: scale var(--d-state, 240ms) var(--ease-out); }
.qi-hello-face:hover .qi-hello-me { scale: 1.03; }
.qi-hello-peek { position: absolute; inset: 0; z-index: 0; }
.qi-hello-peek img { position: absolute; left: 50%; top: 50%; width: clamp(84px, 8.4vw, 116px);
  translate: -50% -50%; rotate: 0deg; scale: 0.7; opacity: 0; pointer-events: none;
  transition: translate 620ms var(--ease-out), rotate 620ms var(--ease-out),
    scale 620ms var(--ease-out), opacity 300ms var(--ease-out); }
.qi-hello-face:hover .qi-hello-peek img {
  translate: calc(-50% + var(--x)) calc(-50% + var(--y)); rotate: var(--r); scale: 1; opacity: 1; }
/* A size down from the page's own heading, at her word (26 Oct). It stays one of the published roles
   rather than becoming a font-size of its own, so it does not read as a stray to the type check. */
/* The heading role, whole. The leading used to be pulled in to 1.12 here — three lines of a sentence this
   size read as a block rather than as a list when they are closer together — and the comment above it said
   that kept it inside the type system. It did not: a role is a size and a leading together, so 32px set at
   35.84 was an eleventh pair on a page that publishes ten, and the type check reads the pair. The leading is
   the role's again. If she wants it tight, the tight pair has to be published in src/theme.css as a role of
   its own and probed with the other ten, which is a change to the suite rather than to this line. */
.qi-hello-say { max-width: 22ch; margin: 0; font: var(--hero-font);
  letter-spacing: var(--h2-track); }
.qi-hello-more { max-width: 46ch; margin: 18px 0 0; color: var(--muted); font: var(--l1-font); }
:root[data-motion="reduced"] .qi-hello-peek img { transition: none; }
@media (max-width: 700px) { .qi-hello-say { max-width: 16ch; } }
/* The companies run past in the hero, under her line. The track holds the row twice, so when it has
   travelled half its width it is back where it started and the loop has no seam. The bar at the foot
   still names the one era you are standing in, which is a different question. */
/* The same component the foot of the page carries, in the hero: one glass pill, and inside it the
   companies running past with their own marks rather than the single one you are standing in. */
/* The marquee has no shell of its own any more: the navigator at the foot is the shell, and this is
   what runs inside it while the reader is still in the hero. It needs a width to run in and an edge to
   fade out against; everything else — the glass, the hairline, the lift — the bar already has. */
.c-quiet-index-navsay.is-orgs { width: min(280px, 58vw); overflow: hidden; gap: 0;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
.qi-hello-track { display: flex; width: max-content; animation: qi-orgs 26s linear infinite; }
.qi-hello-track span { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  color: var(--ink); font: var(--l2-font); white-space: nowrap; }
.qi-hello-track b { font-weight: 600; }
/* The marks sit on a ground of their own at this size. McKinsey's and Google X's are dark artwork on
   dark, which at 16px reads as a block rather than a mark, so each one gets the page's own raised
   ground behind it and a little room inside the corner. */
.qi-hello-track .mf-logo { --s: 15px; flex: none; display: grid; place-items: center; overflow: hidden;
  width: 23px; height: 23px; padding: 4px; border-radius: 6px; background: var(--raised); }
.qi-hello-track .mf-logo img { width: 100%; height: 100%; object-fit: contain; }
@keyframes qi-orgs { from { translate: 0 0; } to { translate: -50% 0; } }
:root[data-motion="reduced"] .qi-hello-track { animation: none; }

/* The company you are standing in, said in the navigator at the foot of the page. */
/* The bar says where you are by naming it: the company's own mark and its name, changing as the reading
   line crosses from one era to the next. It replaces the row of dots, which counted progress without
   saying anything (her word, 26 Oct). */
.c-quiet-index-navsay { display: flex; align-items: center; gap: 9px; color: var(--ink);
  font: var(--l2-font); white-space: nowrap; opacity: 1;
  transition: opacity 160ms var(--ease-out), width 380ms var(--ease-out); }
:root[data-motion="reduced"] .c-quiet-index-navsay { transition: none; }
/* A company in the marquee is a control: it takes the pointer, lights under the pointer, and the row
   stops running while the reader is choosing one. */
.qi-hello-go { display: flex; align-items: center; gap: 8px; padding: 4px 14px; border: 0;
  border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer;
  transition: background-color 160ms var(--ease-out); }
.qi-hello-go b { font-weight: 600; }
.qi-hello-go:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); }
.qi-hello-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-quiet-index-navsay.is-orgs:hover .qi-hello-track { animation-play-state: paused; }
/* The reading head on the comb: a short accent rule at the middle of the window, which the scale runs
   past rather than the other way round. Fixed, so it costs one paint and never a frame of animation. */
.qi-tickhead { position: fixed; top: 50%; z-index: 2; width: 26px; height: 2px; translate: -100% -50%;
  border-radius: 2px; background: var(--accent); opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease-out); }
.qi-tickhead.is-on { opacity: .9; }
@media (max-width: 1023px) { .qi-tickhead { display: none; } }
:root[data-motion="reduced"] .qi-tickhead { transition: none; }
/* Her address and her CV, in the bar at the foot. They keep the register of the small print beside them
   and take the pointer like the buttons they are. */
.qi-nav-reach { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.qi-nav-reach .mf-copy-icon { display: none; }
.qi-nav-reach :is(a, .mf-copy) { display: inline-flex; align-items: center; padding: 4px 11px; border: 0;
  border-radius: 999px; background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--body);
  font: var(--l2-font); text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.qi-nav-reach :is(a, .mf-copy):hover { background: color-mix(in oklch, var(--ink) 11%, transparent); color: var(--ink); }
.qi-nav-reach :is(a, .mf-copy):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The printed row says the same as the bar, so it steps aside once the bar exists. */
:root.has-bar-reach .qi-spell-reach { display: none; }
.c-quiet-index-navsay b { font-weight: 600; }
/* The company over what she was there, set tight, the way the bar on her reference carries them. */
.qi-nav-two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.qi-nav-two i { font-style: normal; color: var(--muted); font-size: 0.86em; }
.c-quiet-index-navsay .mf-logo { --s: 18px; flex: none; overflow: hidden; border-radius: 5px; }
.c-quiet-index-navsay:empty { display: none; }
/* the tracker it replaces */
.c-quiet-index-navg .c-quiet-index-navr { display: none; }

/* The section opens the way a company does: its name alone, centred on a screen of its own, and then
   the cards rise over it. It was a small label in the corner, which read as a heading on a page rather
   than as the start of something. */
.c-quiet-index-why > .c-quiet-index-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  margin: 0;
  font: var(--h2-font);
  letter-spacing: var(--h2-track);
  text-transform: none;
  color: var(--ink);
  text-align: center;
}

/* ---------- Why Monika, as a stack ----------
   Her word (26 Oct): this should read the way the work reads. So the four cards are a column pinned at
   the middle of the window, each covering the one before it as you come to it — the same device the
   companies use, which is the browser's own sticky and nothing else.

   What this costs: the four used to hold one photograph between them, a quarter each, and turning them
   assembled it. Cards that stand one in front of another cannot share a picture that way, so a turned
   card now carries the whole photograph rather than its share of it. The mosaic is in the history if
   she wants the grid back instead. */
/* Two classes deep: the grid is declared at one further down the sheet and was winning, which left the
   cards placed by a three-column grid they are no longer in. */
/* The cards go when the room comes, and the room stands where they were. */
.qi-whystack { position: relative; }
/* While the drawings are in the air. The room has not arrived yet; this is the section letting go of
   them, and it waits until the last one is off its card so the emptied cards can be read first. Written
   with the section in front of it because the rule that gives this grid its transition is written that
   way and comes later in the sheet: a bare class here loses the delay and the fade starts at once. */
.c-quiet-index-why .c-quiet-index-whygrid.is-throwing { opacity: 0; pointer-events: none; transition-delay: 560ms; }
/* The four stand in the bento again, at her word: one tall cell and three wide ones, all four on the
   screen at once. The sticky stack that stood here put one card in the middle of the window at a time
   and scrolled the others past it, which was a way of reading them one by one; the grid is how they
   were meant to be seen, and it is also what gives their drawings four different places to leave from
   when the story starts. The grid itself is written further down this sheet, with the cards. */
.c-quiet-index-why .c-quiet-index-whygrid { transition: opacity 420ms var(--ease-out); }

/* ---------- Writing: an essay, set to be read ----------
   One measure for the words, her own type roles throughout, and her pictures stepping out a little
   wider than the text so the page has a rhythm rather than one column of everything. The measure is
   given in characters rather than pixels: it is the line length that makes prose readable, and it
   holds at any type size. */
.c-quiet-index-writing { --measure: 64ch; padding-bottom: clamp(80px, 14vh, 160px); }
.qi-essay { display: flex; flex-direction: column; align-items: center; }
.qi-essay-head { width: min(var(--measure), 100%); margin: clamp(40px, 9vh, 110px) 0 clamp(28px, 5vh, 54px); }
.qi-essay-title { margin: 0; font: var(--h1-font); letter-spacing: var(--h1-track); color: var(--ink); text-wrap: balance; }
.qi-essay-stand { margin: 18px 0 0; font: var(--b1-font); color: var(--body); text-wrap: pretty; }
.qi-essay-meta { margin: 20px 0 0; font: var(--l2-font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qi-essay-body { display: flex; flex-direction: column; align-items: center; width: 100%; }
.qi-essay-body > * { width: min(var(--measure), 100%); }
.qi-essay-body p { margin: 0 0 1.15em; font: var(--b2-font); color: var(--body); text-wrap: pretty; }
.qi-essay-h { margin: clamp(32px, 5vh, 58px) 0 14px; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
/* A picture is the one thing that steps outside the measure: wide enough to be looked at, never so wide
   that the eye loses the column it came from. */
.qi-essay-fig { width: min(880px, 100%); margin: clamp(26px, 4vh, 44px) 0 clamp(30px, 5vh, 50px); }
/* The box, held at the picture's own proportions, with a skeleton inside it until the file arrives.
   The shimmer is one pale band travelling across a quiet ground — it says "coming" without asking to be
   watched, and it stops the moment there is something real to look at. */
.qi-essay-shot { position: relative; display: block; width: 100%; aspect-ratio: var(--fr, 16 / 10);
  overflow: hidden; border-radius: var(--r-m); background: var(--fill-2); box-shadow: var(--card-lift); }
.qi-essay-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 18%,
    color-mix(in oklch, var(--raised) 85%, transparent) 50%, transparent 82%);
  background-size: 220% 100%;
  animation: qi-shim 1.5s linear infinite;
}
@keyframes qi-shim { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.qi-essay-shot.is-ready::after { content: none; }
.qi-essay-shot :is(img, video) { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 420ms var(--ease-out); }
.qi-essay-shot.is-ready :is(img, video) { opacity: 1; }
:root[data-motion="reduced"] .qi-essay-shot::after { animation: none; }
:root[data-motion="reduced"] .qi-essay-shot :is(img, video) { transition: none; }
.qi-essay-fig figcaption { margin: 14px auto 0; max-width: var(--measure); font: var(--l2-font); color: var(--muted); text-wrap: pretty; }
@media (max-width: 760px) {
  .c-quiet-index-writing { --measure: 100%; }
  .qi-essay-head, .qi-essay-body > * { width: 100%; }
}

/* ---------- the two heroes, and the room coming out of her ----------
   The room is built and waiting, scaled down into her and out of the way. Pressing her lets it out from
   where she stands; the drawing with the lightbulbs in it puts her back. */
.qi-herostack { position: relative; }
/* The drawings in flight: above everything, catching nothing, each placed by its own transform. */
.qi-spill { position: fixed; z-index: 95; inset: 0; overflow: hidden; pointer-events: none; }
.qi-spill img { position: absolute; left: 0; top: 0; width: clamp(56px, 5.6vw, 78px); margin: -32px 0 0 -32px;
  will-change: translate, rotate; transition: opacity 180ms linear; }
.qi-hello-me { cursor: pointer; }
.qi-hello { transition: opacity 420ms var(--ease-out), scale 560ms var(--ease-out); }
.qi-herostack[data-hero="crowd"] .qi-hello { opacity: 0; scale: 0.88; pointer-events: none; }
.qi-herocrowd { position: absolute; inset: 0; opacity: 0; visibility: hidden; scale: 0.3;
  transform-origin: 50% 40%; pointer-events: none;
  transition: opacity 520ms var(--ease-out), scale 640ms var(--ease-out), visibility 0s linear 640ms; }
.qi-herostack[data-hero="crowd"] .qi-herocrowd { opacity: 1; visibility: visible; scale: 1;
  pointer-events: auto; transition-delay: 0s, 0s, 0s; }
/* The way back out of the room. Every figure in the crowd lives in a layer that takes no pointer, and
   pointer-events is inherited, so the drawing with the lightbulbs took none either: the press landed on the
   room behind it and nothing happened, and because the figure was never the thing under the cursor it did
   not even show the hand this line asks for. The room's own handler finds which drawing is under a press by
   geometry and never needed the element; the hero's handler reads the target, so the target has to be real.
   Only this one drawing is given back its pointer, which is exactly the one this line already promised. */
.qi-herostack[data-hero="crowd"] .qi-crowd-f[data-who="s6"] { cursor: pointer; pointer-events: auto; }
/* ---------- the story, while it is told, is the window ----------
   One sheet of paper over everything, with the trail painted on it and the card standing in the middle
   of it. It fades in rather than cutting, so the four drawings leaving this section's own cards are seen
   leaving the cards and not a sheet. Under the bottom bar, which is where Back lives. */
.qi-story {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  background: var(--paper);
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
}
.qi-story.is-on { opacity: 1; }
/* The trail itself: painted and never cleared, which is the whole of why the drawings stay where they
   have been. Nothing is pressed through it - the press belongs to the sheet, which takes the next one. */
.qi-cascade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The card the story stands in the middle is one of this section's cards: the same size, the same
   corner, the same padding, the drawing taped at the top left and the line sitting at the foot of it,
   and painted one of the four colours those cards are painted, which mountWhy reads off them and hands
   over. Nothing here invents a second kind of card. It leaves by its drawing jumping off it, so the
   card goes with the drawing rather than before it. */
/* The seat: where on the sheet the card is put down. It carries nothing but the place and the size. */
.qi-story-seat {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: calc(-50% + var(--cx, 0px)) calc(-50% + var(--cy, 0px));
  z-index: 1;
  /* The size the card in Work is, to the pixel. That card is a small rectangle in the middle of a tall
     window and not a panel the height of one, and this is the same card, so it is the same size (her
     word, 27 Oct). Height is auto so a longer sentence can push it past its minimum rather than be cut. */
  width: min(318px, 72vw);
  height: auto;
}
/* The card, dealt. It comes in off the side at a slant and squares up fast, and goes out flicked the
   other way: the motion of a hand coming off a pile rather than something fading in and out. Quick,
   because nothing in a game of solitaire is slow. */
.qi-story-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(12px, 1.8vh, 20px);
  width: 100%;
  min-height: min(298px, 72vw);
  padding: clamp(22px, 2.4vw, 30px);
  opacity: 0;
  translate: var(--dx, 58px) -22px;
  rotate: -5deg;
  scale: 0.97;
  transition:
    opacity 170ms linear,
    translate 260ms cubic-bezier(0.17, 0.86, 0.32, 1),
    rotate 260ms cubic-bezier(0.17, 0.86, 0.32, 1),
    scale 260ms cubic-bezier(0.17, 0.86, 0.32, 1);
}
.qi-story-card.is-in { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
:root[data-motion="reduced"] .qi-story-card {
  transition: opacity 170ms linear; translate: none; rotate: none; scale: 1;
}
.qi-story-card.is-gone {
  opacity: 0;
  translate: calc(var(--dx, 58px) * -0.7) 34px;
  rotate: 6deg;
  scale: 0.98;
  transition-duration: 140ms, 200ms, 200ms, 200ms;
}
.qi-story-card img {
  display: block;
  width: auto;
  max-width: min(64%, 150px);
  height: auto;
  max-height: clamp(72px, 11vh, 112px);
  object-fit: contain;
}
/* Set where the strip sets the words on a card, which is where this section now sets them too. */
.qi-story-card b { margin: 0; font: var(--b1-font); color: var(--ink); text-wrap: pretty; }
/* The card gives, the way a board gives when something pushes off it, and then it is a card with one
   sentence on it and nothing else. The kick is put on the cell and not on the card inside it: that card
   is a preserve-3d element whose faces are backface-culled, and a transform animated on it takes the
   front face out of the picture entirely - the card simply vanished. */
@keyframes qi-said-kick { 0% { scale: 1; } 24% { scale: 0.976; } 100% { scale: 1; } }
.c-quiet-index-whycell.is-said { animation: qi-said-kick 480ms var(--ease-out); }
:root[data-motion="reduced"] .c-quiet-index-whycell.is-said { animation: none; }
:root[data-motion="reduced"] .qi-hello, :root[data-motion="reduced"] .qi-herocrowd { transition: none; }

.c-quiet-index-strip::-webkit-scrollbar { display: none; }
.c-quiet-index-strip:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--r-m); }
/* A card is not a box with a picture in it. The card IS the piece: the work's own tinted field fills the whole
   frame — that field is what .mf-work has always drawn, in a tone taken from the asset itself — and her words
   lie on it at the top left, the way a line of type lies on a slide. Nothing is nested inside anything.

   The frame is landscape, because a row of upright cards reads as a list standing on its end, and because the
   work itself is landscape. The screen inside floats to the right and runs off that edge, so the words have
   the left of the field to themselves and the piece is plainly bigger than the card can hold. */
/* A card reads as a card by standing a little off the paper, and by nothing else (22 Oct). The hairline
   that was round it is gone — on a card that is mostly picture an outline reads as a box drawn around
   something rather than as its edge. What is left is one soft shadow, close and low, the kind a sheet
   casts lying on a table. */
/* Quieter, at her word (26 Oct): one hairline and one diffuse fall, nothing stacked or dark. A card
   should look like it is resting on the page rather than hovering over it. */
:root { --card-lift: 0 0.5px 1px rgb(0 0 0 / 0.03), 0 10px 26px -6px rgb(0 0 0 / 0.07); }
.c-quiet-index-card {
  position: relative;
  flex: none;
  width: min(720px, 88vw);
  aspect-ratio: 16 / 10;
  box-shadow: var(--card-lift);
  margin: 0;
  border-radius: calc(var(--r-l) + 8px);
  overflow: hidden;
  scroll-snap-align: start;
}
.c-quiet-index-card > :is(.mf-work, .c-quiet-index-shot) { position: absolute; inset: 0; margin: 0; }
/* One corner to a card. .mf-work rounds itself to --r-l + 4 wherever it is used, and a card is --r-l + 8:
   inside one, the field's curve and the card's curve met at every corner and left a sliver of the card
   showing through — the two radii she saw disagreeing. Anything filling a card now takes the card's own. */
.c-quiet-index-card :is(.mf-work, .c-quiet-index-shot, .mf-media) { border-radius: inherit; }
/* A sentence standing on footage needs the footage to give way under it, or the two read as one mess —
   which is what happened the moment the squares became clips. The deck she is measuring against does the
   same thing: a gradient of the card's own ground, down the top third, under the words and nothing else.
   It is the paper by default and ink on a card that says its picture is dark. */
/* Not over a rebuilt panel. A panel is the product's own values, harvested — the one thing this case may
   not repaint — and a scrim across the top 58% of the card turned its ink pale grey. Footage is what the
   scrim is for; a piece of the product keeps its own colour and gets room instead (see the sentence's own
   width below). */
.c-quiet-index-card:has(.c-quiet-index-said):not(:has(.mf-work.is-built))::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 58%;
  /* Much lighter, at her word (21 Oct): it was a wash across the top third of every card. Enough to hold a
     sentence legible over footage, not enough to read as a panel laid on the picture. */
  background: linear-gradient(to bottom, color-mix(in oklch, var(--paper) 58%, transparent), transparent);
  pointer-events: none;
}
.c-quiet-index-card[data-ink="light"]:has(.c-quiet-index-said):not(:has(.mf-work.is-built))::before {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.32), transparent);
}
.c-quiet-index-card .mf-work { aspect-ratio: auto; height: 100%; border-radius: inherit; }
/* The screen, over to the right and off the edge, leaving the field's left to her words. It is 72 across and
   pushed 14 of its own width past the edge, so its left edge falls at 38 of the field — and her column is cut
   to stop short of that, which is what keeps the two from ever meeting. */
.c-quiet-index-card .mf-work:is(.is-framed, .is-matte) { place-items: center end; }
.c-quiet-index-card .mf-work:is(.is-framed, .is-matte) > :is(img, video) {
  /* As wide as the field can give it without touching her words or running off the card. She asked for
     bigger (2026-10-18) and then for nothing cut off and nothing overlapping (2026-10-19), and those two
     together are exactly this: the column of words takes the left 36 of the card, so 58 across is what is
     left, and it sits still rather than being pushed past the edge. */
  width: min(58cqw, (100cqh - 2 * var(--pad)) * var(--mr));
  translate: 0;
}
/* A rebuilt piece is not fitted to the card the way a picture is — fitting it would shrink its type until it
   was a picture of a product again, which is the whole thing we are getting away from. It stands at very
   nearly its own size and the card clips it, so what is on screen is readable and it is plainly bigger than
   the frame can hold. */
.c-quiet-index-card .mf-work.is-built { display: block; container-type: normal; }
.c-quiet-index-card .mf-work.is-built > :is(.qi-sk, .qi-tb, .qi-mi, .qi-gen) {
  position: absolute;
  top: 50%;
  left: 38%;
  scale: 0.82;
  transform-origin: left center;
  translate: 0 -50%;
}
/* a generated piece is scaled by what mountPieces measured, never by a number chosen here */
.c-quiet-index-card .mf-work.is-built > .qi-gen { scale: var(--k, 0.82); }
/* On a phone there is no room beside a panel. A 343px card leaves 96px to the left of the piece, which is
   five characters to a line, so the sentence was simply lying across the product's own interface. A card
   carrying a rebuilt panel stands up instead: her sentence has the top of it to itself and the panel sits
   under the words, whole. Cards carrying footage are untouched — words over footage is what the scrim is
   for, and that is intended. */
/* ---------- one company to a screen, on a phone ----------
   Her word (26 Oct): scrolling the work on a phone should be one experience at a time rather than four
   stacked rows. Each era is given the window's height and its contents sit in the middle of it, and the
   scroller is asked — not told — to come to rest on one, so a flick still travels and a slow scroll
   still settles. svh rather than vh, because vh on a phone is the height the window has when the
   browser's own chrome is hidden, which is not the height anything is being read in.

   The cards are bound by width here, not height: a 16:9 card at the full width of a 375px screen is
   195px tall, and growing it to fill the rest would only crop it. So they take the width and keep their
   own proportions, and the air around them is the point rather than waste. */
/* ---------- a company as a stack, at her word (26 Oct) ----------
   Read off her reference rather than guessed at. There, each piece of work is position: sticky at one
   fixed offset, and the track it sits in is about three and a half times its own height. So a piece
   arrives, comes to rest, holds while the reader looks at it, and is then covered by the next piece
   sliding up over it — the one underneath stays pinned where it was. Nothing is animated and nothing
   is measured in script: the browser's own sticky does all of it, which is why it is smooth on a phone.

   Here the same thing carries a company: the opener holds the screen first — her name for the place,
   when she was there, what she was — and then its work rises over it one piece at a time. The bar at
   the foot says the same two things, so what you are looking at is named in two places at once.

   The scale down the margin is gone with this; a stack is its own order and did not need a ruler
   beside it. */
.c-quiet-index-time .c-quiet-index-chapter { display: block; }
.c-quiet-index-time .c-quiet-index-chapter + .c-quiet-index-chapter { margin-top: 0; }

/* The opener, holding the screen until the work covers it. Written four classes deep because the row
   sets this element to grid with baseline alignment for the old layout, and at three it was the grid
   that won — which spread the three lines evenly down 900px instead of setting them as a block. */
.c-quiet-index-time .c-quiet-index-chapter .c-quiet-index-row .c-quiet-index-sub {
  /* Not pinned. On her reference the project's name holds the screen and then scrolls away, and only
     the work stacks — pinned, it stayed under the first piece and its two lower lines showed around
     the card's edges, which reads as a fault rather than as layering. */
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100svh;
  text-align: center;
}
/* Her name for the place is the thing on the screen; when she was there and what she was sit under it
   in the small register, the way her reference sets a project's name over its one line. */
/* Set the way her hero is set: the mark stands on its own line the way her photograph does, the name
   under it, and the two small lines under that. Side by side the mark read as a bullet beside a word;
   stacked it is the company's own face, which is what the opening screen of a project should carry. */
.c-quiet-index-time .c-quiet-index-chapter .c-quiet-index-org {
  /* The head was one band as tall as the company mark — 40px — which is right for a row and wrong for
     a stacked opener: the column overflowed its own box and the two lines under it were drawn across
     the name. */
  height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(900px, 92vw);
  gap: 16px;
  font: var(--h2-font);
  letter-spacing: var(--h2-track);
}
/* ui.logo writes --s into the element's own style attribute, and an inline custom property beats a
   declaration of the same one in a sheet — so the size is set here rather than the variable. */
.c-quiet-index-time .c-quiet-index-chapter .c-quiet-index-org .mf-logo {
  width: clamp(42px, 4.4vw, 58px);
  height: clamp(42px, 4.4vw, 58px);
  border-radius: calc(var(--r-l) + 2px);
  overflow: hidden;
}
/* Sentence case at a readable size, not a tracked micro-label. The inspector is right about this one:
   a line under a name that is set in 11px tracked capitals is a sticker, and this is a sentence. */
.c-quiet-index-role { color: var(--muted); font: var(--b3-font); letter-spacing: 0; text-transform: none; }
.c-quiet-index-time .c-quiet-index-chapter .c-quiet-index-year.is-plain {
  font: var(--b3-font); letter-spacing: 0; text-transform: none; color: var(--muted);
}

/* The work: one column, every piece pinned at the same place, each covering the one before it.

   Measured on her reference rather than guessed: every piece there is 77% of the window's height and
   its width simply follows its own proportions. That is what gives the wide margins — nothing sets a
   max-width; a landscape piece sized by height cannot reach the sides of a wide window. So the height
   is what is said here, and --row-h, which already derives a card's width from it, does the rest. */
.c-quiet-index-time .c-quiet-index-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The window's own width, centred against it. 50% here resolves against the row, which is the page's
     reading measure and not the window, so the stack sat 144px off centre and its widest pieces ran off
     the side. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* The last piece needs track under it or it never comes to rest, and the track has to be INSIDE the
     content box. It was padding, and a sticky element is held by its containing block's content box, so
     every pixel of that padding was track the last card could not use: measured, the five pinned pieces
     let go at exactly content-bottom minus the piece and its margin, and the final card of every company
     passed through the middle of the screen at full scrolling speed without ever stopping there. An
     empty flex item does what the padding was meant to do. It is not an element, so the sticky rule for
     the row's children leaves it alone. */
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  /* Bigger, at her word (27 Oct). A card's width comes from this, so every row in the section widens
     with it; the second term is what holds a card inside a narrow window. */
  --row-h: min(78svh, calc(96vw / 1.5));
}
.c-quiet-index-time .c-quiet-index-strip::after {
  content: '';
  display: block;
  flex: none;
  width: 1px;
  height: calc(var(--row-h) + 24svh);
}
.c-quiet-index-time .c-quiet-index-strip > .qi-note { align-self: center; }
/* Every piece stands at the same height and takes whatever width its own picture asks for. 16/10 was
   written here for the clips, and it cropped every photograph that is not that shape — a portrait had
   its top and bottom taken off to make it landscape. The height is said; the ratio is the picture's. */
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card {
  /* The picture inside is positioned, so it lends the card no width and fit-content came out as zero.
     The card carries the piece's own proportions instead — written into its style attribute beside
     --i — and takes its width from the height. */
  height: var(--ch, var(--row-h));
  width: auto;
  max-width: 92vw;
  aspect-ratio: var(--cr, 16 / 10);
}
/* A piece taller than it is wide takes its width from its height like every other card, so the more
   upright it is the narrower it comes out — her field photographs and the olive courtyard were columns.
   A portrait piece is allowed to be taller than the row instead, which is the only way to widen one
   without cutting the top and bottom off it. The build writes data-port on a piece under 0.95. */
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card[data-port] {
  --ch: min(88svh, calc(var(--row-h) * 1.2));
}

/* Her words are a card, not a panel the height of a film: a small rectangle in the middle of the
   screen with the work stacking over it, the way the cards in the hero read. Its height is said so
   that it can be centred — a sticky top cannot be worked out from an element's own height, and a
   short card given a tall card's offset sits above the middle rather than in it. */
/* The box is the row's own height and holds nothing; the card inside it is small and sits in the
   middle of it. A sticky top cannot be worked out from an element's own height, so giving the box the
   same height as every other piece is what lets a short card be centred by the same offset as a tall
   one — and the card is then free to hug its words instead of standing in a panel. */
.c-quiet-index-time .c-quiet-index-strip > .qi-note {
  width: min(318px, 72vw);
  height: var(--row-h);
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
/* The card the hero carries, whole: her paper inside a white rim, die-cut corners, a soft fall, and the
   foil. Squarer than a line of text wants to be, because a sticker is a sticker — the words set the
   height only once they need more than the square gives them. The foil is copied from the hero's own
   card rather than reinvented: bands of colour painted over the paper at low alpha and masked to where
   the light is, so it reads as something catching the light rather than printed stripes.

   A hair off solid, like the hero's, so the page is present through the card rather than stopped by it. */
/* ---------- one card, in two places ----------
   This is the card: her paper inside a white rim, die-cut corners, a soft fall and the foil, which came
   out of the hero's own card. It stands in the strip in Work when a chapter says something in words,
   and it is the one the telling puts in the middle of the window. The four in Why Monika are not this
   card and are not meant to be: they are her own tinted cards, and what this is, is what each of them
   turns into for as long as the sequence runs. Written once here; what stands inside each of the two,
   and how big it is, is its own business below.

   A hair off solid, like the hero's, so the page is present through the card rather than stopped by it. */
.c-quiet-index-time .c-quiet-index-strip > .qi-note .qi-note-in,
.qi-story-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  opacity: 0.99;
  --rim: clamp(9px, 1.5vw, 14px);
  --mx: 50%;
  --my: 50%;
  --holo: 0.45;
  border: var(--rim) solid var(--sticker-edge, #fff);
  border-radius: calc(var(--r-l) + 6px);
  background: var(--paper);
  background-clip: padding-box;
  box-shadow:
    0 1px 1px color-mix(in oklch, var(--ink) 7%, transparent),
    0 10px 22px color-mix(in oklch, var(--ink) 14%, transparent),
    0 34px 70px color-mix(in oklch, var(--ink) 10%, transparent);
}
/* The strip's own: it stands in a box the row's height, squarer than a line of text wants to be because
   a sticker is a sticker, and it tilts to the pointer. */
.c-quiet-index-time .c-quiet-index-strip > .qi-note .qi-note-in {
  pointer-events: auto;
  width: 100%;
  min-height: min(298px, 72vw);
  height: auto;
  display: grid;
  place-items: center;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}
.c-quiet-index-time .qi-note-in::before,
.c-quiet-index-time .qi-note-in::after,
.qi-story-card::before,
.qi-story-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* The inner corner is the outer one less the rim — the padding box the card is clipped to. */
  border-radius: calc(var(--r-l) + 6px - var(--rim));
  pointer-events: none;
  transition: opacity 300ms ease, background-position 180ms linear;
}
/* The rainbow, masked to where the light is and falling off to nothing at the edges. */
.c-quiet-index-time .qi-note-in::before,
.qi-story-card::before {
  background: repeating-linear-gradient(
    112deg,
    #ff8f8b 0%, #ffe892 5%, #9ff0a8 10%, #8fe6ff 15%,
    #9aa8ff 20%, #e39bff 25%, #ff8f8b 30%);
  background-size: 240% 240%;
  background-position: var(--mx) var(--my);
  opacity: calc(var(--holo) * 0.42);
  -webkit-mask-image: radial-gradient(farthest-side circle at var(--mx) var(--my),
    #000 0%, rgb(0 0 0 / 0.75) 26%, transparent 72%);
  mask-image: radial-gradient(farthest-side circle at var(--mx) var(--my),
    #000 0%, rgb(0 0 0 / 0.75) 26%, transparent 72%);
}
/* The light. On a light card the readable part of a glare is the fall-off, not the bright spot. */
.c-quiet-index-time .qi-note-in::after,
.qi-story-card::after {
  background:
    radial-gradient(farthest-corner circle at var(--mx) var(--my),
      rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 34%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my),
      color-mix(in oklch, var(--ink) 0%, transparent) 38%,
      color-mix(in oklch, var(--ink) 11%, transparent) 100%);
  opacity: calc(0.45 + var(--holo) * 0.55);
}
/* The words are printed on the foil, so they are the one thing above it. */
.c-quiet-index-time .qi-note-in > *,
.qi-story-card > * { position: relative; z-index: 1; }
:root[data-motion="reduced"] .c-quiet-index-time .qi-note-in { transform: none; }
/* Padding only. The height, the minimum and the corner are the card's, written with the foil above —
   this block came first and was still setting min-height to nothing, which kept the card a letterbox. */
.c-quiet-index-time .c-quiet-index-strip > .qi-note .qi-note-in {
  padding: clamp(22px, 2.4vw, 30px);
}
/* The words on the card are the thing on the screen when it is the card's turn, so they are set at the
   top of the body scale rather than near the bottom of it. */
.c-quiet-index-time .c-quiet-index-strip > .qi-note p { font: var(--b1-font); text-wrap: pretty; }
.c-quiet-index-time .c-quiet-index-strip > * {
  position: sticky;
  /* centred in the window rather than tucked under the top edge: there is no bar up there to clear */
  /* Centred on its own height rather than on the row's: a portrait piece is taller (below), and given
     a landscape piece's offset it sat above the middle instead of in it. */
  top: calc((100svh - var(--ch, var(--row-h))) / 2);
  flex: none;
  max-width: 86vw;
  /* The travel between one piece and the next. Miro has eleven pieces, and at 56svh apiece its last
     picture was six screens of scrolling away — which she read as it arriving very late. */
  margin-bottom: 15svh;
}
/* A framed clip floats on a field of its own, which is what made every card in the old sideways row
   read as one set. In the stack a card is most of the screen, and the same frame left a 600px clip in
   the middle of a 1037px card — she read them as tiny. The field stays, because it is what the clip was
   filmed on; it is a margin now rather than half the card. */
/* The picture itself: the card's height, and the width its own proportions give it. Forced to auto the
   ratio was lost and the image was stretched to whatever box it found. */
.c-quiet-index-time .c-quiet-index-strip .mf-work {
  display: grid;
  place-items: center;
  height: var(--row-h);
  width: auto;
  aspect-ratio: var(--ratio, 16 / 10);
}
/* Whatever box the frame puts the clip in — it is not always .c-anatomy-vbox — it takes the height the
   card has rather than the size the product was captured at, and keeps its own proportions. */
.c-quiet-index-time .c-quiet-index-strip .mf-work.is-framed > * {
  /* Measured off --row-h, which is a length. A percentage here resolved against a box whose own height
     was not definite, and the clip came out taller than the card it stands in. */
  width: auto;
  height: calc(var(--row-h) * 0.88);
  max-width: 92%;
  aspect-ratio: var(--mr, 1.6);
}

/* ---------- a preview that carries her sentence ----------
   The card took the clip's own proportions and the clip was given 88 per cent of the card's height and
   up to 92 of its width, so it filled the card and her sentence had nowhere to go but on top of the
   product's own screen - which is what she saw on the Lilli previews. The card is widened by the width
   of a column of words instead: the clip keeps its proportions and stands at the right, the words have
   the left to themselves, and the two never meet. The scrim goes with them, because a sentence on the
   field does not need the picture dimmed under it. */
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card:has(.c-quiet-index-said):has(.mf-work:is(.is-framed, .is-matte)) {
  aspect-ratio: auto;
  /* The clip at the size the next rule gives it, plus a column for the words. Said as a sum rather than
     as a proportion of the card, because a proportion makes the gap between the words and the clip grow
     with the clip - a wide piece then left a third of the card empty. */
  --say-col: clamp(190px, 17vw, 300px);
  width: min(92vw, calc(var(--row-h) * 0.94 * var(--crn, 1.6) + var(--say-col)));
}
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card:has(.c-quiet-index-said):has(.mf-work:is(.is-framed, .is-matte))::before { display: none; }
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card:has(.c-quiet-index-said) .mf-work:is(.is-framed, .is-matte) {
  place-items: center end;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding-right: clamp(14px, 2.2vw, 32px);
}
/* Bigger than it was - 94 per cent of the row where it used to be 88 - and never more than 62 of the
   card, which is what leaves the column of words standing. Width is what is said, so a clip that would
   overrun simply comes in; its height follows and nothing is cut. */
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card:has(.c-quiet-index-said) .mf-work:is(.is-framed, .is-matte) > * {
  width: min(calc(100cqw - var(--say-col, 245px)), calc(var(--row-h) * 0.94 * var(--mr, 1.6)));
  height: auto;
  max-width: none;
  aspect-ratio: var(--mr, 1.6);
}
.c-quiet-index-time .c-quiet-index-strip > .c-quiet-index-card:has(.mf-work:is(.is-framed, .is-matte)) .c-quiet-index-said {
  top: 50%;
  translate: 0 -50%;
  width: min(22ch, calc(var(--say-col, 245px) - 2.6rem));
}

/* Not all down one line. The pieces step off centre as you go — left, right, a little left — so the
   stack has a rhythm across as well as down, and a piece arriving is not simply the last one redrawn
   at a different height. Moved with translate rather than with the box, so nothing reflows and nothing
   can be pushed off the side; 86vw of width leaves 7vw either side to move in. */
/* Three classes deep: the row sets this strip to flex-start further down the sheet, and at two it won
   — which left every piece against the left edge of the window and the ones nudged left hanging off it. */
.c-quiet-index-time .c-quiet-index-chapter .c-quiet-index-strip { align-items: center; }
.c-quiet-index-time .c-quiet-index-strip > *:nth-child(4n + 2) { translate: clamp(-74px, -5vw, 0px) 0; }
.c-quiet-index-time .c-quiet-index-strip > *:nth-child(4n + 3) { translate: clamp(0px, 5vw, 74px) 0; }
.c-quiet-index-time .c-quiet-index-strip > *:nth-child(4n + 4) { translate: clamp(-44px, -3vw, 0px) 0; }
:root[data-motion="reduced"] .c-quiet-index-time .c-quiet-index-strip > * { translate: none; }
.c-quiet-index-time .c-quiet-index-strip > :last-child { margin-bottom: 0; }

/* The scale is gone: a stack is its own order. Both halves of the comb and the head that read it are
   off, not deleted — the rules below draw nothing until something asks them to. */
.c-quiet-index-time .c-quiet-index-chapter::before,
.c-quiet-index-time .c-quiet-index-chapter::after { content: none; }
.qi-tickhead { display: none; }

/* The old reveal held a chapter's name and its work at opacity 0 until an observer marked the chapter
   is-up — an observer written for rows a third of a screen tall. A chapter is a track of several
   screens now and never satisfied it, so the name never arrived at all. The stack has an arrival of
   its own, so this is released here rather than retuned. */
.c-quiet-index-time.is-live .c-quiet-index-chapter :is(.c-quiet-index-org, .c-quiet-index-tldr, .c-quiet-index-strip) {
  opacity: 1;
  translate: none;
}
/* The years were pushed to the right end of the head by margin-left:auto, for a row that had the name
   on the left and the dates on the right. The opener is a centred column. */
.c-quiet-index-time .c-quiet-index-sub .c-quiet-index-years {
  position: static;
  margin: 0;
  padding: 0;
  inset: auto;
}

@media (max-width: 760px) {
  /* On the strip itself: it declares --row-h on its own box, and a value inherited from an ancestor
     cannot win against that however specific the ancestor's selector is. */
  .c-quiet-index-time .c-quiet-index-strip { --row-h: 48svh; }
  /* A card takes the width it can have and then stands as tall as the screen allows. A clip filmed at
     16:9 is only 195px tall at the full width of a phone, so matching each card to its own clip left
     most of the screen empty and gave the row three different heights. Every card is one height now and
     the clip is laid on it rather than stretched to it: nothing is cropped, and what shows above and
     below is the card's own ground — for Miro's clips the canvas colour they were filmed on, so it
     reads as more board rather than as a letterbox.

     Three kinds of card share this row — her words, the cover, and the shelf pieces — and each carries
     its media differently, which is why the height and the fit are both said for all of them rather
     than once. */
  .c-quiet-index-strip > * { width: calc(100vw - 28px); height: var(--row-h); }
  .qi-shelf-item { width: calc(100vw - 28px); }
  .qi-shelf-card { height: 100%; aspect-ratio: auto; }
  .c-quiet-index-card { aspect-ratio: auto; }
  .c-quiet-index-card .mf-work { height: 100%; aspect-ratio: auto; }
  /* Two classes deep, because .qi-shelf-media video and .mf-work video both say cover at one class and
     one element, and at equal specificity whichever is written last wins — which was not this. */
  .c-quiet-index-time .c-quiet-index-strip :is(img, video, iframe) { object-fit: contain; }
  .qi-note-in { height: 100%; min-height: 0; }
}

@media (max-width: 700px) {
  .c-quiet-index-card:has(.mf-work.is-built) { aspect-ratio: 4 / 5; }
  .c-quiet-index-card:has(.mf-work.is-built) .c-quiet-index-said {
    width: auto;
    right: clamp(20px, 2.6vw, 34px);
  }
  .c-quiet-index-card .mf-work.is-built > :is(.qi-sk, .qi-tb, .qi-mi, .qi-gen) {
    top: auto;
    bottom: 6%;
    left: 50%;
    transform-origin: center bottom;
    translate: -50% 0;
  }
}
/* and one with nothing written beside it stands in the middle of its card rather than off to the right */
.c-quiet-index-card .mf-work.is-built > .qi-gen.is-alone {
  left: 50%;
  transform-origin: center;
  translate: -50% -50%;
}
/* the toolbar is one bar rather than a panel, so it stands whole inside the field and nearly full size */
.c-quiet-index-card .mf-work.is-built > :is(.qi-tb, .qi-br) { left: 50%; scale: 0.92; transform-origin: center; translate: -50% -50%; }
/* Square two is a stage rather than one object, and it is the tallest of them, so it keeps to the right of
   the field like every other piece — the words on the left are never under it. */
/* Square two is a stage rather than one panel — the suggestions, the bar, the message and the reply — so it
   is fitted to the card by what mountPieces measured (--k) like every other generated piece, rather than
   standing at a size of its own and running off the edge. */
.c-quiet-index-card .mf-work.is-built > .qi-chat { left: 38%; transform-origin: left center; translate: 0 -50%; }
/* ----- Sidekick, rebuilt -----
   The panel as the app draws it: its own type (Noto Sans, which this site does not otherwise use — it is the
   product's voice, not hers), its ink, its thirteen-pixel names and fourteen-pixel field. Everything is in px
   because these are the product's measurements and shrinking them would make it a picture again. */
.qi-sk {
  width: var(--skw);
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #fff;
  color: rgb(25, 24, 18);
  font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
  box-shadow: 0 1px 2px rgb(25 24 18 / 0.06), 0 24px 48px -24px rgb(25 24 18 / 0.3);
  user-select: none;
}
.qi-sk-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qi-sk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid rgb(25 24 18 / 0.14); border-radius: 999px;
  font-size: 13px; font-weight: 500;
}
.qi-sk-spark { display: block; width: 14px; height: 14px; }
.qi-sk-spark svg { display: block; width: 100%; height: 100%; }
.qi-sk-plus { color: rgb(25 24 18 / 0.55); font-size: 18px; line-height: 1; padding: 0 2px; }
.qi-sk-note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 9px 12px;
  border-radius: 10px; background: rgb(25 24 18 / 0.04);
  font-size: 12px; color: rgb(25 24 18 / 0.72);
}
.qi-sk-note i { flex: none; display: block; width: 14px; height: 14px; }
.qi-sk-note svg { display: block; width: 100%; height: 100%; }
.qi-sk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qi-sk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
}
.qi-sk-row:nth-child(4) { background: rgb(25 24 18 / 0.04); }
.qi-sk-ico { flex: none; width: 22px; height: 22px; }
.qi-sk-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.qi-sk-desc { font-size: 13px; color: rgb(25 24 18 / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-sk-field {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 0; padding: 11px 14px;
  border-radius: 10px; background: rgb(25 24 18 / 0.04);
  font-size: 14px; color: rgb(25 24 18 / 0.45);
}
.qi-sk-field span { flex: 1 1 auto; }
.qi-sk-field i { flex: none; display: block; width: 16px; height: 16px; color: rgb(25 24 18 / 0.6); }
.qi-sk-field svg { display: block; width: 100%; height: 100%; }

/* ----- the canvas toolbar, rebuilt -----
   The app's own measurements: a 48-high bar on a 16px radius, 40px targets at a 12px radius, 8px between
   them, and the tool you are holding in Miro blue on its pale ground. */
.qi-tb {
  display: flex; align-items: center; gap: 8px;
  width: 604px; height: 48px; padding: 4px;
  border-radius: 16px; background: #fff;
  font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
  color: rgb(25, 24, 18);
  box-shadow: 0 1px 2px rgb(25 24 18 / 0.08), 0 14px 32px -16px rgb(25 24 18 / 0.34);
  user-select: none;
}
.qi-tb-tools { display: flex; align-items: center; gap: 8px; }
.qi-tb-b {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
}
.qi-tb-b svg { width: 24px; height: 24px; display: block; }
.qi-tb-b.is-on { background: rgb(232, 236, 252); color: rgb(49, 76, 217); }
.qi-tb-field {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; height: 40px; padding: 0 12px 0 16px;
  border-radius: 12px; background: rgb(25 24 18 / 0.05);
  font-size: 14px; color: rgb(25 24 18 / 0.45);
}
.qi-tb-field span { flex: 1 1 auto; }
.qi-tb-field i { flex: none; display: block; color: rgb(25, 24, 18); }
.qi-tb-ai img { width: 20px; height: 20px; display: block; border-radius: 5px; }
.qi-tb-chev { color: rgb(25 24 18 / 0.5); }
.qi-tb-chev svg { width: 18px; height: 18px; display: block; }

/* A generated piece places every part of itself absolutely, at the geometry it was measured at, so it needs
   nothing from this stylesheet but a box to stand in and a promise that nothing will reflow it. */
.qi-gen { position: relative; overflow: hidden; user-select: none; font-family: system-ui, sans-serif; }
/* ----- a generated piece with more than one state -----
   Every state is a layer at the same origin; the step says which one is up. They are all in the document at
   once so nothing has to be built mid-sequence and nothing can jump. */
.qi-gen-l {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}
/* a layered piece lights the layer its step is on, whichever piece it is */
.qi-gen[data-step="0"] > .qi-gen-l[data-at="0"],
.qi-gen[data-step="1"] > .qi-gen-l[data-at="1"],
.qi-gen[data-step="2"] > .qi-gen-l[data-at="2"],
.qi-gen[data-step="3"] > .qi-gen-l[data-at="3"] { opacity: 1; }
/* The plan is twice the height of a question: it stands on the floor of the square with its top running out
   of it, so what is on screen is the end of the plan and the button that approves it. */
.qi-align .qi-gen-l[data-mode="plan"] { top: auto; bottom: 0; }
/* and the rows of whichever state is up arrive the way the product's own do: 0.25s, ease, one after another.
   The duration and the easing are harvested; the rise is the one thing standing in for a keyframe the
   running app does not hand over. */
@keyframes qi-row-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
:root[data-motion="full"] .qi-align .qi-gen-l[data-at]:not([style*="opacity:0"]) > div:nth-child(n+2) {
  animation: qi-row-in 0.25s ease both;
}
.qi-align[data-step="0"] .qi-gen-l[data-at="0"] > div:nth-child(n+3),
.qi-align[data-step="1"] .qi-gen-l[data-at="1"] > div:nth-child(n+3),
.qi-align[data-step="2"] .qi-gen-l[data-at="2"] > div:nth-child(n+3) {
  animation-delay: calc((var(--row, 0)) * 40ms);
}
/* the product's face is claimed only once a piece is near the window; see mountPieces */
.qi-gen.is-near { font-family: var(--font-product); }
.qi-gen * { box-sizing: border-box; margin: 0; }
.qi-gen svg { display: block; }

/* ----- the Miro pieces, rebuilt -----
   All four share the product's ground: white on a 16-20px radius, Noto Sans, Miro's ink and its shadow. The
   sizes are the app's, so each one stands at nearly its own scale inside a card and the card clips it. */
.qi-mi {
  font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
  color: rgb(25, 24, 18);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgb(34 36 40 / 0.12), 0 18px 40px -22px rgb(34 36 40 / 0.3);
  user-select: none;
}
.qi-mi-g { display: block; color: rgb(25 24 18 / 0.62); }
.qi-mi-g svg { display: block; width: 22px; height: 22px; }
.qi-mi-mark { display: block; }
.qi-mi-mark img { display: block; width: 22px; height: 22px; border-radius: 5px; }

/* ----- square two: saying it on the board -----
   The bar is the product's, generated from its own measurements and standing at the foot of a stage. What
   moves over it is this site's: a pointer that comes to the bar, the words appearing a character at a time,
   and what was said floating up when it is sent. None of that is harvested — the prototype does it through
   React rather than through anything a computed style can be read off — and it is kept plain for that
   reason: arrive, type, send, and nothing else. */
/* ----- square two: the stage -----
   Three harvested panels at the same origin, standing on the floor of the square so the tall one — the
   answer, which brings a picker with it — runs out of the top rather than being squashed. Only one is
   lit at a time. Everything any of them looks like came with it. */
.qi-chat { background: none; box-shadow: none; overflow: hidden; }
/* The panel is a column the height of the side of the app, and the card is a window onto it. Before
   anything is said the part that matters is the foot of it — what it offers, and the bar — so those two
   stand on the floor of the square. Once something is sent the part that matters is the head of it: the
   message where it landed and the answer starting under it. Nothing inside any of them is moved; the window
   is simply looking at the other end of the same column. */
/* All three stand on the floor of the square, where the bar and the sheet stand on a board. */
.qi-chat > .qi-gen-l { top: auto; bottom: 0; }

/* the pointer, which is the product's own cursor */
.qi-cur {
  position: absolute; z-index: 5; display: block; width: 22px; height: 22px;
  color: rgb(25, 24, 18);
  left: 470px; top: 150px; opacity: 0;
  filter: drop-shadow(0 2px 3px rgb(34 36 40 / 0.35));
  transition: left 560ms var(--ease-drawer), top 560ms var(--ease-drawer), opacity 220ms ease;
}
.qi-cur svg { display: block; width: 100%; height: 100%; }
.qi-chat[data-step="1"] .qi-cur, .qi-chat[data-step="2"] .qi-cur, .qi-chat[data-step="3"] .qi-cur { opacity: 1; }
.qi-chat[data-step="1"] .qi-cur, .qi-chat[data-step="2"] .qi-cur { left: 200px; top: 142px; }
.qi-chat[data-step="3"] .qi-cur { left: 470px; top: 150px; }

/* The rules that used to live here — .qi-chat, .qi-chat-bar, .qi-cur and the cursor's step-3 place —
   belonged to the hand-drawn version of square two and were overriding the ones written for the generated
   one, because this file carries two generations of this CSS and the later one wins. The bar painted a
   second white box with a shadow around the harvested bar, and the cursor stood where the old stage put it.
   They are gone; everything square two looks like is in the block above, or in the harvest itself. */
/* ----- Sidekick, rebuilt -----
   The panel as the app draws it: its own type (Noto Sans, which this site does not otherwise use — it is the
   product's voice, not hers), its ink, its thirteen-pixel names and fourteen-pixel field. Everything is in px
   because these are the product's measurements and shrinking them would make it a picture again. */
.qi-sk {
  width: var(--skw);
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #fff;
  color: rgb(25, 24, 18);
  font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
  box-shadow: 0 1px 2px rgb(25 24 18 / 0.06), 0 24px 48px -24px rgb(25 24 18 / 0.3);
  user-select: none;
}
.qi-sk-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qi-sk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid rgb(25 24 18 / 0.14); border-radius: 999px;
  font-size: 13px; font-weight: 500;
}
.qi-sk-spark { display: block; width: 14px; height: 14px; }
.qi-sk-spark svg { display: block; width: 100%; height: 100%; }
.qi-sk-plus { color: rgb(25 24 18 / 0.55); font-size: 18px; line-height: 1; padding: 0 2px; }
.qi-sk-note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 9px 12px;
  border-radius: 10px; background: rgb(25 24 18 / 0.04);
  font-size: 12px; color: rgb(25 24 18 / 0.72);
}
.qi-sk-note i { flex: none; display: block; width: 14px; height: 14px; }
.qi-sk-note svg { display: block; width: 100%; height: 100%; }
.qi-sk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qi-sk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
}
.qi-sk-row:nth-child(4) { background: rgb(25 24 18 / 0.04); }
.qi-sk-ico { flex: none; width: 22px; height: 22px; }
.qi-sk-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.qi-sk-desc { font-size: 13px; color: rgb(25 24 18 / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-sk-field {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 0; padding: 11px 14px;
  border-radius: 10px; background: rgb(25 24 18 / 0.04);
  font-size: 14px; color: rgb(25 24 18 / 0.45);
}
.qi-sk-field span { flex: 1 1 auto; }
.qi-sk-field i { flex: none; display: block; width: 16px; height: 16px; color: rgb(25 24 18 / 0.6); }
.qi-sk-field svg { display: block; width: 100%; height: 100%; }

/* ----- the canvas toolbar, rebuilt -----
   The app's own measurements: a 48-high bar on a 16px radius, 40px targets at a 12px radius, 8px between
   them, and the tool you are holding in Miro blue on its pale ground. */
.qi-tb {
  display: flex; align-items: center; gap: 8px;
  width: 604px; height: 48px; padding: 4px;
  border-radius: 16px; background: #fff;
  font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
  color: rgb(25, 24, 18);
  box-shadow: 0 1px 2px rgb(25 24 18 / 0.08), 0 14px 32px -16px rgb(25 24 18 / 0.34);
  user-select: none;
}
.qi-tb-tools { display: flex; align-items: center; gap: 8px; }
.qi-tb-b {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
}
.qi-tb-b svg { width: 24px; height: 24px; display: block; }
.qi-tb-b.is-on { background: rgb(232, 236, 252); color: rgb(49, 76, 217); }
.qi-tb-field {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; height: 40px; padding: 0 12px 0 16px;
  border-radius: 12px; background: rgb(25 24 18 / 0.05);
  font-size: 14px; color: rgb(25 24 18 / 0.45);
}
.qi-tb-field span { flex: 1 1 auto; }
.qi-tb-field i { flex: none; display: block; color: rgb(25, 24, 18); }
.qi-tb-ai img { width: 20px; height: 20px; display: block; border-radius: 5px; }
.qi-tb-chev { color: rgb(25 24 18 / 0.5); }
.qi-tb-chev svg { width: 18px; height: 18px; display: block; }

/* A generated piece places every part of itself absolutely, at the geometry it was measured at, so it needs
   nothing from this stylesheet but a box to stand in and a promise that nothing will reflow it. */
.qi-gen { position: relative; overflow: hidden; user-select: none; font-family: system-ui, sans-serif; }
/* ----- a generated piece with more than one state -----
   Every state is a layer at the same origin; the step says which one is up. They are all in the document at
   once so nothing has to be built mid-sequence and nothing can jump. */
.qi-gen-l {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}
.qi-align[data-step="0"] .qi-gen-l[data-at="0"],
.qi-align[data-step="1"] .qi-gen-l[data-at="1"],
.qi-align[data-step="2"] .qi-gen-l[data-at="2"],
.qi-align[data-step="3"] .qi-gen-l[data-at="3"] { opacity: 1; }
/* The plan is twice the height of a question: it stands on the floor of the square with its top running out
   of it, so what is on screen is the end of the plan and the button that approves it. */
.qi-align .qi-gen-l[data-mode="plan"] { top: auto; bottom: 0; }
/* and the rows of whichever state is up arrive the way the product's own do: 0.25s, ease, one after another.
   The duration and the easing are harvested; the rise is the one thing standing in for a keyframe the
   running app does not hand over. */
@keyframes qi-row-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
:root[data-motion="full"] .qi-align .qi-gen-l[data-at]:not([style*="opacity:0"]) > div:nth-child(n+2) {
  animation: qi-row-in 0.25s ease both;
}
.qi-align[data-step="0"] .qi-gen-l[data-at="0"] > div:nth-child(n+3),
.qi-align[data-step="1"] .qi-gen-l[data-at="1"] > div:nth-child(n+3),
.qi-align[data-step="2"] .qi-gen-l[data-at="2"] > div:nth-child(n+3) {
  animation-delay: calc((var(--row, 0)) * 40ms);
}
/* the product's face is claimed only once a piece is near the window; see mountPieces */
.qi-gen.is-near { font-family: var(--font-product); }
.qi-gen * { box-sizing: border-box; margin: 0; }
.qi-gen svg { display: block; }

/* ----- the Miro pieces, rebuilt -----
   All four share the product's ground: white on a 16-20px radius, Noto Sans, Miro's ink and its shadow. The
   sizes are the app's, so each one stands at nearly its own scale inside a card and the card clips it. */
.qi-mi {
  font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
  color: rgb(25, 24, 18);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgb(34 36 40 / 0.12), 0 18px 40px -22px rgb(34 36 40 / 0.3);
  user-select: none;
}
.qi-mi-g { display: block; color: rgb(25 24 18 / 0.62); }
.qi-mi-g svg { display: block; width: 22px; height: 22px; }
.qi-mi-mark { display: block; }
.qi-mi-mark img { display: block; width: 22px; height: 22px; border-radius: 5px; }

/* ----- square two: saying something into the board -----
   A stage rather than a card: the bar sits at its foot where the product puts it, what you said floats up
   over it, the chat opens above that, and a pointer walks between them. Every step below is the same markup
   in a different state — nothing is swapped in, so nothing jumps. */
.qi-chat-ph, .qi-chat-said {
  margin: 0 0 14px; font-size: 15px; line-height: 20px; min-height: 20px;
  transition: opacity 180ms var(--ease-out);
}
.qi-chat-ph { color: rgb(25 24 18 / 0.42); }
.qi-chat-said { position: absolute; left: 16px; right: 16px; top: 14px; color: rgb(25, 24, 18); opacity: 0; }
/* the typing itself: the words are revealed a character at a time, with a caret riding the edge */
.qi-chat-said span {
  display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap;
  vertical-align: bottom; width: 0;
  border-right: 1.5px solid transparent;
}
.qi-chat-foot { display: flex; align-items: center; gap: 10px; }
.qi-chat-sp { flex: 1 1 auto; }

/* What you said, floating over the board. The message is generated now — the product's own 244,244,241 on
   a 16px radius, no shadow under it — so the only things said here are where it sits and how it arrives.
   This file carries two generations of the rebuilt-piece CSS and the later one wins, which is why this rule
   has to agree with the one above it. */
.qi-chat-float {
  position: absolute; left: 50%; bottom: 96px;
  opacity: 0; translate: -50% 10px; scale: 0.96;
  transition: opacity 260ms var(--ease-out), translate 420ms var(--spring), scale 420ms var(--spring);
}
/* and the chat it opens into */
.qi-chat-win {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 14px 18px 18px;
  border-radius: 18px; background: #fff;
  box-shadow: 0 2px 8px rgb(34 36 40 / 0.12), 0 22px 48px -24px rgb(34 36 40 / 0.34);
  opacity: 0; translate: 0 14px; scale: 0.97;
  transform-origin: 50% 100%;
  transition: opacity 300ms var(--ease-out), translate 520ms var(--spring), scale 520ms var(--spring);
}
.qi-chat-win .qi-chat-top { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.qi-chat-win .qi-chat-top b { font-size: 14px; font-weight: 700; }
.qi-chat-win .qi-chat-top i { display: block; color: rgb(25 24 18 / 0.5); }
.qi-chat-win .qi-chat-top i svg { display: block; width: 18px; height: 18px; }
.qi-chat-win p { margin: 0; font-size: 14px; line-height: 21px; color: rgb(25 24 18 / 0.86); }

/* the pointer, which is Miro's own */
.qi-cur svg { display: block; width: 100%; height: 100%; }

/* ----- the steps -----
   0 the bar, waiting · 1 the pointer arrives · 2 it is typed · 3 it is sent and floats up
   4 the pointer reaches for it · 5 the chat is open */
.qi-chat[data-step="1"] .qi-cur,
.qi-chat[data-step="2"] .qi-cur,
.qi-chat[data-step="3"] .qi-cur,
.qi-chat[data-step="4"] .qi-cur,
.qi-chat[data-step="5"] .qi-cur { opacity: 1; }
.qi-chat[data-step="1"] .qi-cur,
.qi-chat[data-step="2"] .qi-cur,
.qi-chat[data-step="4"] .qi-cur { left: 268px; top: 268px; }
.qi-chat[data-step="5"] .qi-cur { left: 268px; top: 268px; scale: 0.88; }

.qi-chat[data-step="2"] .qi-chat-ph,
.qi-chat[data-step="3"] .qi-chat-ph { opacity: 0; }
.qi-chat[data-step="2"] .qi-chat-said { opacity: 1; }
.qi-chat[data-step="2"] .qi-chat-said span {
  width: 100%;
  border-right-color: rgb(25, 24, 18);
  animation: qi-type 1180ms steps(24, end) both, qi-caret 760ms steps(2, end) 3;
}
@keyframes qi-type { from { width: 0; } to { width: 100%; } }
@keyframes qi-caret { 0%, 50% { border-right-color: rgb(25, 24, 18); } 50.01%, 100% { border-right-color: transparent; } }

.qi-chat[data-step="3"] .qi-chat-float,
.qi-chat[data-step="4"] .qi-chat-float,
.qi-chat[data-step="5"] .qi-chat-float { opacity: 1; translate: -50% 0; scale: 1; }
.qi-chat[data-step="5"] .qi-chat-float { bottom: 110px; }
.qi-chat[data-step="5"] .qi-chat-win { opacity: 1; translate: 0 0; scale: 1; }

/* the questions, and the plan that comes back before anything is touched */
.qi-al { width: 496px; padding: 18px 20px 20px; border-radius: 20px; }
.qi-al-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qi-al-head b { font-size: 14px; font-weight: 700; }
.qi-al-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.qi-al-list li { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.qi-al-list li:first-child { background: rgb(25 24 18 / 0.04); }
.qi-al-n {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 7px; background: rgb(25 24 18 / 0.06);
  font-size: 12px; color: rgb(25 24 18 / 0.7);
}
.qi-al-list li > span:nth-child(2) { flex: 1 1 auto; }
.qi-al-list li i { flex: none; display: block; color: rgb(25 24 18 / 0.35); }
.qi-al-list li i svg { display: block; width: 18px; height: 18px; }
.qi-al-plan { display: grid; gap: 3px; margin: 0 0 12px; }
.qi-al-plan b { font-size: 15px; font-weight: 700; }
.qi-al-plan span { font-size: 13px; color: rgb(25 24 18 / 0.62); }
.qi-al-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 12px; background: rgb(25 24 18 / 0.04); }
.qi-al-col { display: grid; gap: 6px; }
.qi-al-col b { font-size: 11px; }
.qi-al-col s { height: 16px; border-radius: 4px; text-decoration: none; }
.qi-al-col.is-c0 s { background: #86efac; }
.qi-al-col.is-c1 s { background: #fca5a5; }
.qi-al-col.is-c2 s { background: #93c5fd; }

/* ----- square four: working in public -----
   The toast is the product's, generated from its own measurements and sitting where it sits, top right. The
   board beneath and the named tag on it are ours: the agent's cursor is only ever drawn while it is moving
   across a real board, so there is no still moment a harvest can be taken at. The yellow is the product's
   own — #ffd02f, what it marks a live thing with — and nothing else here claims to be. */
.qi-pres { background: none; box-shadow: none; }
.qi-pres-board {
  position: absolute; left: 0; top: 56px; right: 0; bottom: 56px;
  border-radius: 12px; background: #f1f1f0;
  opacity: 0; scale: 1.06; transform-origin: 32% 40%;
  transition: opacity 420ms ease, scale 700ms var(--ease-out);
}
.qi-pres[data-step="1"] .qi-pres-board,
.qi-pres[data-step="2"] .qi-pres-board,
.qi-pres[data-step="3"] .qi-pres-board { opacity: 1; scale: 1; }
.qi-pres-f {
  position: absolute; background: #fff; border-radius: 4px; text-decoration: none;
  box-shadow: 0 1px 2px rgb(25 24 18 / 0.08);
  opacity: 0; transition: opacity 320ms ease;
}
.qi-pres-f.is-a { left: 26px; top: 34px; width: 132px; height: 92px; }
.qi-pres-f.is-b { left: 182px; top: 34px; width: 158px; height: 68px; }
.qi-pres-f.is-c { left: 364px; top: 34px; width: 158px; height: 68px; }
.qi-pres[data-step="2"] .qi-pres-f, .qi-pres[data-step="3"] .qi-pres-f { opacity: 1; }
.qi-pres[data-step="2"] .qi-pres-f.is-a { outline: 2px solid #ffd02f; }
.qi-pres[data-step="3"] .qi-pres-f.is-b { transition-delay: 120ms; }
.qi-pres[data-step="3"] .qi-pres-f.is-c { transition-delay: 240ms; }
.qi-pres-tag {
  position: absolute; display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 7px;
  background: #ffd02f; color: rgb(25, 24, 18);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity 240ms ease, left 620ms var(--ease-drawer), top 620ms var(--ease-drawer);
}
.qi-pres-tag.is-think { left: 20px; top: 8px; }
.qi-pres-tag.is-sk { left: 300px; top: 160px; }
.qi-pres[data-step="2"] .qi-pres-tag, .qi-pres[data-step="3"] .qi-pres-tag { opacity: 1; }
.qi-pres[data-step="3"] .qi-pres-tag.is-sk { left: 140px; top: 126px; }
/* the toast, where the product puts it */
.qi-pres-toast {
  position: absolute; right: 0; top: 0;
  opacity: 0; translate: 0 -8px;
  transition: opacity 300ms ease, translate 460ms var(--spring);
}
.qi-pres[data-step="1"] .qi-pres-toast,
.qi-pres[data-step="2"] .qi-pres-toast,
.qi-pres[data-step="3"] .qi-pres-toast { opacity: 1; translate: 0 0; }
/* and voice, on */
.qi-pres-voice {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 4px;
  font-size: 12px; color: rgb(25 24 18 / 0.62);
  opacity: 0; transition: opacity 300ms ease;
}
.qi-pres[data-step="3"] .qi-pres-voice { opacity: 1; }
.qi-pres-voice s { width: 3px; border-radius: 2px; background: rgb(25 24 18 / 0.5); text-decoration: none; }
.qi-pres-voice s:nth-of-type(1) { height: 8px; }
.qi-pres-voice s:nth-of-type(2) { height: 15px; }
.qi-pres-voice s:nth-of-type(3) { height: 11px; }
.qi-pres-voice s:nth-of-type(4) { height: 18px; }
.qi-pres-voice s:nth-of-type(5) { height: 9px; }
.qi-pres-voice span { margin-left: 8px; align-self: center; }
:root[data-motion="full"] .qi-pres[data-step="3"] .qi-pres-voice s { animation: qi-vox 900ms ease-in-out infinite alternate; }
.qi-pres-voice s:nth-of-type(2) { animation-delay: 120ms; }
.qi-pres-voice s:nth-of-type(3) { animation-delay: 240ms; }
.qi-pres-voice s:nth-of-type(4) { animation-delay: 60ms; }
.qi-pres-voice s:nth-of-type(5) { animation-delay: 300ms; }
@keyframes qi-vox { from { scale: 1 0.6; } to { scale: 1 1.15; } }

/* ----- square five: the look of its own -----
   Three decisions, one at a time. The claim is Apris — the serif this site already carries, and the face the
   product keeps for a display moment — and the line under it is the product's sans. That is the first
   decision demonstrating itself rather than being described. The yellow underline appears on the live claim
   and nowhere else, which is the second. There is nothing else on the card, which is the third. */
.qi-br { background: none; box-shadow: none; display: grid; align-content: center; }
.qi-br-row {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  gap: 10px;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 320ms ease, translate 520ms var(--ease-out);
}
.qi-br-row b {
  position: relative;
  display: inline;
  font-family: "Apris", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  color: rgb(25, 24, 18);
  background-image: linear-gradient(#ffd02f, #ffd02f);
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0 7px;
  transition: background-size 520ms var(--ease-out) 220ms;
}
.qi-br-row span {
  font-family: var(--font-product);
  font-size: 15px;
  line-height: 22px;
  color: rgb(25 24 18 / 0.66);
  max-width: 34ch;
}
.qi-br[data-step="0"] .qi-br-row[data-at="0"],
.qi-br[data-step="1"] .qi-br-row[data-at="1"],
.qi-br[data-step="2"] .qi-br-row[data-at="2"] { opacity: 1; translate: 0 0; }
.qi-br[data-step="0"] .qi-br-row[data-at="0"] b,
.qi-br[data-step="1"] .qi-br-row[data-at="1"] b,
.qi-br[data-step="2"] .qi-br-row[data-at="2"] b { background-size: 100% 7px; }
:root[data-motion="reduced"] .qi-br-row { transition: opacity 160ms linear; translate: none; }

/* ----- the architecture card -----
   Ink on paper at one line weight, which is what an architect's axonometric is. The house is drawn first,
   then what makes it a house, then the people — in that order, as you reach it, because that is the order it
   would be drawn in. Nothing is filled: the paper under it is the paper of the page. */
.qi-arch { background: none; box-shadow: none; color: var(--ink); }
.qi-arch svg { display: block; overflow: visible; }
.qi-arch g[class^="qi-arch-"] { opacity: 0; transition: opacity 620ms var(--ease-out); }
.qi-arch .qi-arch-g, .qi-arch .qi-arch-h { transition-duration: 760ms; }
.qi-arch[data-step="0"] :is(.qi-arch-g, .qi-arch-h),
.qi-arch[data-step="1"] :is(.qi-arch-g, .qi-arch-h, .qi-arch-d, .qi-arch-t),
.qi-arch[data-step="2"] :is(.qi-arch-g, .qi-arch-h, .qi-arch-d, .qi-arch-t, .qi-arch-p) { opacity: 1; }
.qi-arch[data-step="1"] .qi-arch-t, .qi-arch[data-step="2"] .qi-arch-t { opacity: 0.7; }
.qi-arch[data-step="0"] .qi-arch-g, .qi-arch[data-step="1"] .qi-arch-g, .qi-arch[data-step="2"] .qi-arch-g { opacity: 0.38; }

/* ----- X: one field, the picture's own colour -----
   This was filled edge to edge once and that was worse: a picture running the full height of a card against a
   field of another colour is a seam, and a seam is a two-column layout however you describe it. So it is one
   field again, with the picture standing in it — and the field is the colour the picture already is, the
   lilac her X work is full of, rather than a tint chosen against it. Nothing blends because nothing is being
   asked to: there is one surface, and a screen placed on it.

   Smaller than the rest, too, and with nothing under it. These are filmed scenes rather than screens of
   software: no outline, because on a readout of coloured noise it was the one line on the card belonging to
   nothing, and no shadow, because a shadow is exactly what makes a picture look placed on a card instead of
   being part of it. One surface. */
.c-quiet-index-chapter[data-era="googlex"] .c-quiet-index-card .mf-work:is(.is-framed, .is-matte) > :is(img, video) {
  /* As big as the field allows without reaching her words. The column on the left is 31% of the card and
     stops at about 36% of it, so 62 across is what is left — anything wider and the picture is standing on
     the sentence. It also stands in the field rather than running out of it: nothing here is cut by the
     card's edge. */
  /* Bigger, at her word (2026-10-18), without moving onto her words: the picture keeps its left edge where
     it was — clear of the column by a finger — and grows out past the card's right edge instead, which is
     what the rebuilt squares beside it do. Seventy-two across, pushed fourteen of its own width over, so it
     starts at the same place and is plainly larger than the card can hold. */
  width: min(58cqw, (100cqh - 1.2 * var(--pad)) * var(--mr));
  translate: 0;
  outline: none;
  /* No shadow either. A shadow is what lifts a screenshot off a page, and lifting it off is the one thing
     this card must not do: the field is the picture's own colour, so the moment nothing is casting onto
     anything there is a single surface rather than a photograph resting on one. */
  box-shadow: none;
  /* ----- the border that is in the film -----
     The seismic clip was recorded with the app sitting on a pale ground, so a lilac frame is part of the
     footage itself — no CSS put it there and no CSS takes it away. It is zoomed past instead: scaled up by
     the width of that frame and then clipped by the same amount, so what is left is the tool and nothing
     around it. That also settles the colour, because once the frame is gone there are no two lilacs to
     disagree — the dark of the tool meets the field directly. */
  /* A recorded border is clipped off only where an asset asks for it — clip on the asset says so, and most
     of them do not ask, because the better answer is usually the field. Give a card the colour the footage
     was shot on and the recorded border stops being a border: there is nothing to cut because there is
     nothing to see. Clipping is what is left for the clips where that is not true. */
  clip-path: var(--clip, none);
}

/* ----- one colour to a company -----
   The tone .mf-work picks on its own comes from the asset's own address, which is right everywhere else on
   the site and wrong in a strip: a row of one company's work came out sky, mint, lilac, as if each piece
   belonged to someone different. A company gets one colour here, and its own where it has one — Miro's
   yellow, McKinsey's deep blue let right down, and for X, which is black and white, her paper warmed a
   shade. The frame mixes whatever it is given towards --paper, so a field is always a tint of this site
   rather than a brand laid on top of it. The cover is not in this: it fills its card with the work itself. */
/* Miro's row stands on the board's own paper — the clips are filmed on it and the cards are that colour —
   so her sentence is on it too and the row reads as one surface (22 Oct). */
.c-quiet-index-chapter[data-era="miro"] { --era-tint: var(--miro-ground, #F2F2F2); }
.c-quiet-index-chapter[data-era="mckinsey"] { --era-tint: oklch(0.95 0.028 255); }
.c-quiet-index-chapter[data-era="googlex"] { --era-tint: #efeafa; }
.c-quiet-index-chapter[data-era="architecture"] { --era-tint: color-mix(in oklch, var(--paper) 72%, var(--island)); }
.c-quiet-index-chapter[data-era="miro"] .c-quiet-index-card .mf-work.is-framed { --frame-a: #ffd02f; --frame-b: #ffe89a; }
.c-quiet-index-chapter[data-era="mckinsey"] .c-quiet-index-card .mf-work.is-framed { --frame-a: oklch(0.89 0.055 250); --frame-b: oklch(0.93 0.035 255); }
/* X is the exception twice over. It has no colour of its own — it is black and white — and its work is
   filmed rather than drawn, so the field takes the colour the footage already is: rgb(205, 200, 255), read
   off the ground the seismic tool was recorded on rather than chosen to go with it. Flat, not the gradient
   the other fields wear, because a gradient cannot equal a solid and the whole point here is that there is
   one surface: the clip hides the recorded border, the field continues it, and the join is invisible because
   both sides are the same number. */
.c-quiet-index-chapter[data-era="googlex"] .c-quiet-index-card .mf-work.is-framed { --frame-a: #d6cdee; --frame-b: #efeafa; }
/* A card with nothing written on it (an era marked bare in content.js) has no column to keep clear, so it
   stands in the middle of the field and takes nearly all of it — which is what she asked for on Google X:
   much, much bigger. This sits after the era rules above on purpose: same weight, later word. */
.c-quiet-index-chapter .c-quiet-index-card:not(:has(.c-quiet-index-said)) .mf-work:is(.is-framed, .is-matte) { place-items: center; }
.c-quiet-index-chapter .c-quiet-index-card:not(:has(.c-quiet-index-said)) .mf-work:is(.is-framed, .is-matte) > :is(img, video) {
  width: min(94cqw, (100cqh - 1.1 * var(--pad)) * var(--mr));
  translate: 0;
}


/* her words, on the field: the short name of the idea where the piece has one, then what is on the screen */
/* The measure is the one the vision deck uses on its own cards (19 Oct): a card type of
   clamp(24px, 2.2vw, 30px), the sentence set at 0.74 of it, 600, 1.15, -0.01em, over at most 24
   characters. It is a third bigger than what was here and it wraps sooner, which is what makes a sentence
   on a picture read as the point of the card rather than as its caption. */
.c-quiet-index-said {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 2.6vw, 34px);
  left: clamp(20px, 2.6vw, 34px);
  display: grid;
  gap: 6px;
  width: min(46%, 24ch);
  font: var(--l2-font);
  color: var(--body);
  text-wrap: balance;
}
.c-quiet-index-said b { font: var(--c1-font); letter-spacing: var(--c1-track); color: var(--ink); }
.c-quiet-index-said .c-quiet-index-tldr { margin: 0; font: var(--b3-font); color: var(--body); }
/* The pieces behind the cover arrive when the reading line reaches that era, a beat apart, from the right —
   the direction they would come from if the strip were being drawn out. Only where there is script to let
   them in: without it the is-live below is never set and every piece is simply there. */
.c-quiet-index-time.is-live .c-quiet-index-card:not(.is-cover) {
  opacity: 0;
  translate: 36px 0;
  transition: opacity 460ms var(--ease-out), translate 720ms var(--spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.c-quiet-index-time.is-live .c-quiet-index-chapter.is-seen .c-quiet-index-card { opacity: 1; translate: 0 0; }
:root[data-motion="reduced"] .c-quiet-index-time.is-live .c-quiet-index-card:not(.is-cover) { translate: none; transition: opacity 200ms linear; }

/* one piece on its own is the single picture it always was, at the measure — but a row whose other pieces
   are shelf cards is not a row of one, even though only the cover carries this class */
.c-quiet-index-strip:not(:has(.c-quiet-index-card + .c-quiet-index-card)):not(:has(.qi-shelf-item)) .c-quiet-index-card { width: 100%; }

.c-quiet-index-shot { position: relative; display: block; }
.c-quiet-index-shot .mf-work {
  position: relative;
  z-index: 1;
  width: 100%;
  transition: translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
/* the words under the work: the company and her role on the left, what came of it quietly on the right */
.c-quiet-index-chapter .c-quiet-index-sub {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--gap);
}
.c-quiet-index-chapter.is-bare .c-quiet-index-row { padding-bottom: 22px; }
/* The company leads the row: its mark, then its name. A company whose mark the site does not have simply starts
   with its name, and the row keeps the same shape. The name is a step quieter than it was — h3, not h2 — because
   the row is no longer a headline with properties under it: it is a mark, a name and her one sentence. */
/* The company's mark and its name lead the era, so they are set like a heading rather than like a label
   (21 Oct): the next size up in her own scale, with the mark grown to match. The mark's size is written
   inline by ui.logo, so it is set where the mark is made rather than here. */
.c-quiet-index-chapter .c-quiet-index-org { display: flex; align-items: center; height: var(--head); gap: 14px; grid-column: 1; grid-row: 1; font: var(--h2-font); letter-spacing: var(--h2-track); }
/* No plate behind the mark. .mf-logo paints --island behind whatever it holds and clips it to a corner of
   its own, and each of these pictures already carries its own shape — so the plate showed as a dark seam
   round the radius where the picture's corner and the clip's did not agree (22 Oct). */
.c-quiet-index-chapter .c-quiet-index-org .mf-logo { align-self: center; background: none; border-radius: 0; overflow: visible; }
/* The years sit at the right end of the row's own head — the mark, the company's name, then this — which is
   where her live site puts them. They are pushed out to that end rather than following the name, so the badges
   line up down the page however long a company's name is, and they centre on the same line the mark and the
   name do. */
.c-quiet-index-chapter .c-quiet-index-org .c-quiet-index-years { flex: none; margin-left: auto; padding-left: 16px; }
/* Her way into a story: the years, and a chevron that says there is one. Pressing it folds that era's case out
   where it stands and pressing it again puts it away. An era with no case written is the same badge without the
   chevron and without anything to press (is-plain). */
.c-quiet-index-year {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font: var(--l2-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
/* Her dates read as words beside the company's name, at her word (26 Oct): no pill around them, no
   border, no ground. The badge is still what a fold or a case uses — only this one is plain. */
.c-quiet-index-year.is-plain { height: auto; padding: 0; border: 0; background: none;
  color: var(--muted); font: var(--l2-font); letter-spacing: .06em; text-transform: uppercase; }
/* The two marks that are square pictures get a corner; Miro's asset brings its own. */
.c-quiet-index-chapter[data-era="mckinsey"] .mf-logo,
.c-quiet-index-chapter[data-era="googlex"] .mf-logo { overflow: hidden; border-radius: 8px; }
/* Hers was cut round, on the argument that a face in a rounded square beside two company marks reads
   as a third company. Her word, 27 Oct: it reads as the odd one out instead, so it takes the same
   corner as the rest. The corner itself is on the picture, in theme.css, where all four get it. */
.c-quiet-index-chapter.is-at .c-quiet-index-year { color: var(--ink); border-color: var(--line-2); }

/* ---------- the way into a story, on the card it belongs to ----------
   A capsule at the foot of the era's own picture. At rest it is not there; resting on the card lifts it in from
   under the bottom edge, and it stays while the story is out, saying how to put it away. The card itself is the
   control — this is what tells you so — so it never takes the pointer. Dark on the work, because the work is a
   screen and anything paper-coloured over one reads as part of it. With a finger there is no resting, so it is
   simply there; with motion turned down it fades rather than travels. */
.c-quiet-index-open {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 11px 0 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--island) 88%, transparent);
  color: var(--island-ink);
  font: var(--l2-font);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: 0 10px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 18px -8px color-mix(in oklch, var(--ink) 55%, transparent);
  transition: opacity 200ms var(--ease-out), translate 320ms var(--ease-drawer);
}
/* the two labels live in one box, which is as wide as the wider of them, so the capsule never changes width */
.c-quiet-index-openw { display: grid; }
.c-quiet-index-openw > span { grid-area: 1 / 1; transition: opacity 160ms var(--ease-out); }
.c-quiet-index-openw > span:last-child { opacity: 0; }
.c-quiet-index-shot[aria-expanded="true"] .c-quiet-index-openw > span:first-child { opacity: 0; }
.c-quiet-index-shot[aria-expanded="true"] .c-quiet-index-openw > span:last-child { opacity: 1; }
.c-quiet-index-shot[aria-expanded="true"] .c-quiet-index-open { opacity: 1; translate: 0 0; }
.c-quiet-index-shot:focus-visible .c-quiet-index-open { opacity: 1; translate: 0 0; }
.c-quiet-index-yeark { flex: none; opacity: 0.75; rotate: 0deg; transition: rotate 320ms var(--ease-drawer), opacity 180ms var(--ease-out); }
.c-quiet-index-shot[aria-expanded="true"] .c-quiet-index-yeark { rotate: 180deg; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  a.c-quiet-index-shot:hover .c-quiet-index-open { opacity: 1; translate: 0 0; }
}
@media (hover: none) {
  .c-quiet-index-open { opacity: 1; translate: 0 0; }
}
:root[data-motion="reduced"] .c-quiet-index-open { translate: 0 0; transition: opacity 140ms var(--ease-out); }
:root[data-motion="reduced"] .c-quiet-index-yeark { transition-duration: 120ms; }
/* What she was, who she was with, and what came of it: three properties, read the way a Notion page's are, one
   to a line — a faint name in its own column and the value beside it. Her role is a fact about the era, not its
   headline, so all three sit in the quiet register of the years on the rail: l2, which is her 14px, and grey.
   Her sentence under them keeps reading size, which is the one thing that changes register in the row. */
.c-quiet-index-chapter .c-quiet-index-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 16px;
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}
/* They are the head of the opened story now, not part of the collapsed row: a reader scanning the timeline gets
   the era, the company and her sentence, and the facts of the job arrive with the story they belong to. */
.c-quiet-index-chapter .c-quiet-index-meta.is-head { margin: 0 0 26px; }
.c-quiet-index-prop { display: inline-flex; align-items: baseline; gap: 8px; font: var(--l2-font); color: var(--muted); }
.c-quiet-index-chapter .c-quiet-index-prop { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
/* the story's own figures line, standing in the collapsed row: the same component, only left-aligned and without
   the room it takes at the head of a case. On a phone it wraps one figure to a line rather than running off. */
.c-quiet-index-propk { color: var(--faint); }
.c-quiet-index-chapter :is(.c-quiet-index-job, .c-quiet-index-teamv) { font: inherit; color: inherit; text-wrap: pretty; }
/* The plus on the row is gone: it sat beside the company's name and promised something the name did not, and
   there is one control on a row now — the year badge on the rail, above. */
.c-quiet-index-chapter .c-quiet-index-tldr { grid-column: 1; grid-row: 2; margin-top: 10px; }
.c-quiet-index-chapter .c-quiet-index-res { font: inherit; color: inherit; }
/* the figure is said once on this page — here, in the row, which is on screen whether the story is out or not —
   so it keeps a little weight. It does not need ink as well: grey and 500 is enough to find. */
.c-quiet-index-chapter .c-quiet-index-res b { font-weight: 500; color: var(--muted); }
.c-quiet-index-dot { margin: 0 0.5ch; color: var(--line-2); }
.c-quiet-index-chapter .c-quiet-index-job { padding-left: 0; }
/* her sentence about an era reads at the same size, weight and ink as the story that opens under it: one body
   role for all the prose on this page, so nothing shifts register when the case folds out */
/* A size up, at her word (21 Oct): her sentence about an era is the thing most people actually read, and
   it was set at the label size. It takes the body size the rest of the site reads at. */
.c-quiet-index-tldr { display: block; max-width: 58ch; margin-top: 12px; font: var(--b3-font); color: var(--body); text-wrap: pretty; }
/* The company's name is the link to that product's own site, and at rest it is simply her name for that era:
   no rule under it and no arrow beside it. Both arrive when you point at it or reach it with a keyboard, and
   neither moves anything — the arrow holds its room from the start and only fades in, and an underline is paint.
   The arrow is set in the label role, so it stays a mark beside the name rather than a glyph at the name's size. */
.c-quiet-index-orglink { color: inherit; text-decoration: none; }
.c-quiet-index-out { display: inline-block; margin-left: 0.3ch; font: var(--l2-font); color: var(--faint); vertical-align: 0.08em; opacity: 0; transition: opacity var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out); }
.c-quiet-index-chapter .c-quiet-index-out { font: var(--l1-font); }
.c-quiet-index-orglink:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.c-quiet-index-orglink:focus-visible .c-quiet-index-out { opacity: 1; color: var(--muted); }
:root[data-motion="reduced"] .c-quiet-index-out { transition: none; }
/* the work itself carries the hover: it lifts a little off the page, and nothing is painted behind it */
.c-quiet-index-shot { display: block; }
@media (hover: hover) and (pointer: fine) {
  .c-quiet-index-orglink:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
  .c-quiet-index-orglink:hover .c-quiet-index-out { opacity: 1; color: var(--muted); }
  a.c-quiet-index-shot:hover .mf-work {
    translate: 0 -2px;
    box-shadow: 0 2px 6px color-mix(in oklch, var(--ink) 6%, transparent), 0 18px 40px -20px color-mix(in oklch, var(--ink) 28%, transparent);
  }
}
/* ---------- a case, folded out on the timeline ----------
   Under the era's own picture, with nothing to press: the story of the era you have reached opens by itself and
   folds away as you leave it. The drawer is the row making room — grid-template-rows from 0fr to 1fr, with the
   clipping on the sleeve inside it — so the picture above it never moves and the story only ever grows below the
   line you are reading. The pieces themselves are fanned into place in script (poolside's spring), which is why
   there is no arrival transition on the body here: under reduced motion the story is simply, quietly, there. */
.c-quiet-index-fold { grid-column: 1; grid-row: 3; min-width: 0; }
/* The room is made in one step, not slid open: the pieces fan into a space that is already there, the way
   poolside’s menu does, and the page is a different height at exactly one moment, which is the moment the
   scroll is given back what the layout above took. Leaving, the pieces collapse first and the room goes after
   them. Nothing here animates a height, so nothing is ever chasing one. */
.c-quiet-index-read { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); }
.c-quiet-index-chapter:is(.is-open, .is-going) .c-quiet-index-read { grid-template-rows: 1fr; }
.c-quiet-index-read-in { min-width: 0; min-height: 0; overflow: hidden; }
.c-quiet-index-read-body { padding-top: 26px; }
/* once the room is made the sleeve stops clipping, so the page below is what the story's own blocks arrive
   against — the same reading motion a case page has, tied to the scroll, so it plays back up as well */
.c-quiet-index-chapter.is-settled .c-quiet-index-read-in { overflow: visible; }

/* ---------- the navigator ----------
   It comes up out of the bottom of the window as you reach the timeline and goes down again at the end of it,
   carried by the scroll rather than by a tween: --p is how far into the range the page has come, and the control
   is parked 180px under its place while that is zero. It rides in the same floating pill the header rides in —
   the same shape, hairline, paper and shadow — and hugs whatever is in it: a direction with nothing left in it,
   or an era with nothing filmed, takes its width with it as it goes, so the pill closes up around what is left
   rather than keeping an empty place. The era you are in is one lit capsule travelling along a row of marks that
   never move, narrowing as it leaves and widening as it arrives, and filling as you read that era, so the
   progress is the indicator and there is only ever one thing to follow.
   The row is spaced the way the header’s pages are spaced, item for item: the same 11px of air inside each one
   and the same 2px between them (.c-anatomy-nav and .c-anatomy-nav a, above), so the two pills are one system. */
.c-quiet-index-navg {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 20;
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid var(--an-pill-line, var(--line));
  border-radius: 20px;
  /* The same glass as the bar at the top, so the two read as one material. */
  background: var(--an-pill-bg, color-mix(in oklch, var(--raised) 46%, transparent));
  -webkit-backdrop-filter: saturate(1.9) blur(26px);
  backdrop-filter: saturate(1.9) blur(26px);
  box-shadow: var(--an-pill-shadow,
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 1px 2px color-mix(in oklch, var(--ink) 4%, transparent),
    0 12px 28px -14px color-mix(in oklch, var(--ink) 26%, transparent));
  opacity: var(--p, 0);
  transform: translate(-50%, calc(var(--park) * (1 - var(--p, 0))));
  --park: 180px;
  --air: 11px;      /* the header's own padding inside a page link */
  --space: 2px;     /* and the header's own gap between them */
  --mark: 8px;
  --pitch: calc(var(--mark) + 2 * var(--air));   /* one mark's place, the size of a page link's box */
}
.c-quiet-index-navg[inert] { visibility: hidden; }
/* each piece arrives on its own, a fifth of a second after the one before it, from a little under and a little small */
.c-quiet-index-navg :is(.c-quiet-index-navd, .c-quiet-index-navp) {
  flex: none;
  opacity: 0;
  scale: 0.8;
  translate: 0 6px;
  transition: opacity 140ms var(--ease-out), scale 180ms var(--ease-out), translate 180ms var(--ease-out),
    width 250ms var(--ease-out), margin 250ms var(--ease-out), color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.c-quiet-index-navg.is-in :is(.c-quiet-index-navd, .c-quiet-index-navp) {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition-delay: calc(var(--i, 0) * 200ms);
}
/* A direction with nothing left in it, and an era with nothing filmed, are said by absence: they fade and take
   their width and their margin with them, so the pill closes up instead of keeping a space for them. */
.c-quiet-index-navg .is-off {
  width: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 400ms var(--ease-out), width 250ms var(--ease-out), margin 250ms var(--ease-out) !important;
  transition-delay: 0ms !important;
}


/* the row of marks: they never move and never light, so the lit thing over them is the only thing that changes */
.c-quiet-index-navr { position: relative; display: flex; align-items: center; gap: var(--space); height: 26px; }
.c-quiet-index-navd {
  position: relative;
  width: var(--pitch);
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
}
/* where the lit capsule is: the marks are laid out with the header's gap between their boxes */
.c-quiet-index-navr > .c-quiet-index-navd:nth-of-type(n) { flex: none; }
/* The mark itself is a ball with that company's own mark folded away inside it. Resting on it, or tabbing to it,
   grows the ball and the mark fills it — the same object, larger — rather than anything appearing beside it. It
   rises over the lit capsule while it is grown, and sinks back under it after; the box it sits in never changes
   width, so nothing else in the row moves for it. It leaves faster than it arrives. */
.c-quiet-index-navm {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-2);
  translate: -50% -50%;
  transition: width 110ms var(--ease-out), height 110ms var(--ease-out), background-color 110ms var(--ease-out);
}
.c-quiet-index-navl { display: grid; opacity: 0; scale: 0.4; transition: opacity 90ms var(--ease-out), scale 110ms var(--ease-out); }
.c-quiet-index-navl .mf-logo { --s: 18px; display: block; }
.c-quiet-index-navd:is(:hover, :focus-visible) .c-quiet-index-navm {
  z-index: 2;
  width: 18px;
  height: 18px;
  background: var(--fill-2);
  transition-duration: 170ms;
}
.c-quiet-index-navd:is(:hover, :focus-visible) .c-quiet-index-navl { opacity: 1; scale: 1; transition-duration: 130ms, 170ms; }
/* the era being read is already said by the lit capsule over it: pointing at it changes nothing */
.c-quiet-index-navd[aria-current]:is(:hover, :focus-visible) .c-quiet-index-navm { z-index: 0; width: 8px; height: 8px; background: var(--line-2); }
.c-quiet-index-navd[aria-current]:is(:hover, :focus-visible) .c-quiet-index-navl { opacity: 0; scale: 0.4; }
/* the one lit thing: placed by the centre of the mark it belongs to, so it widens and narrows about that centre
   rather than dragging one edge along behind it */
.c-quiet-index-navnow {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  width: var(--w, 8px);
  height: 8px;
  translate: calc(var(--x, 0px) - 50%) -50%;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
  transition: translate 380ms var(--ease-out), width 250ms linear, opacity 200ms var(--ease-out);
}
.c-quiet-index-navnow.is-away { opacity: 0; }
/* and it carries the reading: the fill is how far through that era the reading line has come */
.c-quiet-index-navf { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width 120ms linear; }

/* her own introduction, at the end of the row: the same disc her face in the header opens the video from */
.c-quiet-index-navp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: calc(var(--air) + var(--space));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
}
.c-quiet-index-navi { display: inline-flex; }
.c-quiet-index-navg :is(button):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .c-quiet-index-navp:hover { background: var(--fill-2); }
}
/* and it tightens where the header tightens, by the header's own steps (.c-anatomy-nav a, above) */
@media (max-width: 1023.98px) {
  .c-quiet-index-navg { --air: 8px; }
}

/* a card whose own picture is dark carries its words in paper rather than in ink, with a breath of shade
   under them so they hold whatever is behind them */
.c-quiet-index-card[data-ink="light"] .c-quiet-index-said { color: color-mix(in oklch, var(--paper) 86%, transparent); text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
.c-quiet-index-card[data-ink="light"] .c-quiet-index-said b { color: var(--paper); }

/* ----- the shelf of Miro prototypes -----
   The component the vision portfolio shows her section in, measured off the running page: a 14px label in
   the product sans over a 69px line of Apris at -0.02em; a row that scrolls sideways with 24px between
   cards and a card that is a squircle 64px round, white, with the clip filling it and the title over the
   clip in a header padded 32px / 32px / 64px. The card keeps the clip's own ratio — 1.25 for five of them,
   16/9 for the last — which is the deck's rule too, rather than one shape for everything.
   The sentence under each card is hers from that deck; it sits below the card rather than on the clip,
   because a card this size already carries its title and a second line over footage is the thing that made
   the squares hard to read. */
.qi-shelf-row {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 8px 0 24px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.qi-shelf-row::-webkit-scrollbar { display: none; }
/* One height down the row, and the first clip wider than the rest (her word, 21 Oct).
   The height is the cover's own — its 16/10 at the width it already had — and every card after it stands
   that tall and as wide as its own clip needs: five were recorded at 1.25 and the sixth at 16/9, so that
   one is simply wider rather than cropped to the others' shape (her word, 21 Oct). One height down the
   row, and nothing cut. */
.c-quiet-index-strip:has(.qi-shelf-item) {
  gap: 24px;
  align-items: flex-start;
}
.qi-shelf-item {
  flex: none;
  margin: 0;
  width: calc(var(--row-h) * var(--r, 1.25));
  scroll-snap-align: start;
}
/* The same corner the row's own cover turns, so the cards read as one set rather than as something
   borrowed: the deck rounds these 64px, which beside a 22px cover looked like two components in one row.
   The title is IN the card, over the clip, the way the deck sets it — not a white band stuck on top of it
   (her word, 21 Oct). What keeps it off the footage is the card's own ratio: it is the ratio the clip was
   recorded at, so the clip fills the card without being cropped, and a scrim of the card's own white sits
   under the words so they read over whatever is behind them. */
.qi-shelf-card {
  position: relative;
  display: block;
  width: 100%;
  height: var(--row-h);
  box-shadow: var(--card-lift);
  border-radius: calc(var(--r-l) + 8px);
  /* The board's own paper, not white (her word, 21 Oct): every one of these clips is filmed on the Miro
     canvas, and #F2F2F2 is what that canvas measures — the same value the rebuilt squares stand on. A white
     card and a white fade behind the words both read as a sheet laid over the footage; this one is the
     footage's own ground, so the card and the clip are one surface. */
  background: var(--miro-ground, #F2F2F2);
  overflow: hidden;
}
/* ----- her sentence, standing in the row -----
   Narrower than anything with a picture in it, because it holds only words, and set at the card size so it
   reads as something said rather than as a caption. The ground is that era's own tint — the colour its
   pictures are already framed in — so the card belongs to the row rather than sitting on the page. */
/* Narrower than anything with a picture in it — a clip is 1.25 of the row's height, this is 0.78 — and
   the sentence is set at the card size rather than above it (22 Oct), which is what lets it be this narrow
   without running past the card's foot. */
.qi-note {
  flex: none;
  width: min(calc(var(--row-h) * 0.78), 74vw);
  margin: 0;
  scroll-snap-align: start;
}
.qi-note-in {
  display: grid;
  align-items: center;
  height: var(--row-h);
  box-shadow: var(--card-lift);
  padding: clamp(20px, 2.3vw, 32px);
  border-radius: calc(var(--r-l) + 8px);
  background: var(--era-tint, var(--raised));
}
/* The card size, which is already the tightest setting in the system — 22.2px over 25.53, a leading of
   1.15 — so the sentence reads as a block rather than as a list of lines (22 Oct). Written as the role
   rather than as numbers, so it stays one of the ten the type check knows. */
.qi-note p {
  margin: 0;
  font: var(--c1-font);
  letter-spacing: var(--c1-track);
  color: var(--ink);
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .qi-note { width: 86vw; }
  .qi-note-in { height: auto; min-height: calc(var(--row-h) * 0.9); }
}
a.qi-shelf-card { text-decoration: none; color: inherit; }
a.qi-shelf-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.qi-shelf-out { font-size: 0.82em; opacity: 0.55; }
.qi-shelf-media { position: absolute; inset: 0; }
.qi-shelf-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.qi-shelf-embed { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.qi-shelf-pic { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* The card's own title sits over its media. Over a player that would catch the pointer meant for the
   controls underneath it, so on an embed the title is there to be read and nothing else. */
.qi-shelf-card.is-embed .qi-shelf-head { pointer-events: none; }
.qi-shelf-head {
  position: relative;
  z-index: 2;
  padding: 28px 30px 56px;
  pointer-events: none;
}
.qi-shelf-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--miro-ground, #F2F2F2) 34%,
    color-mix(in oklch, var(--miro-ground, #F2F2F2) 82%, transparent) 62%,
    transparent);
}
.qi-shelf-head h3 {
  max-width: 24ch;
  margin: 0;
  font: var(--c1-font);
  letter-spacing: var(--c1-track);
  color: var(--ink);
  text-wrap: balance;
}
/* On a phone the card is nearly the window, and 64px of radius on a small card reads as a blob. */
@media (max-width: 700px) {
  .qi-shelf-head { padding: 20px 22px 42px; }
  /* One card to a screen on a phone, cover included: at 88vw they stood 7px narrower than the story that
     opens under them, and a column that nearly lines up reads worse than one that does. A row you see one
     card of at a time has nothing to line up along, so each keeps the ratio it was recorded at instead. */
  .c-quiet-index-strip:has(.qi-shelf-item) > :is(.qi-shelf-item, .c-quiet-index-card) { width: 100%; }
  .qi-shelf-card { height: auto; aspect-ratio: var(--r, 1.25); }
}

/* ----- her own drawing on the timeline -----
   A band of the section, drifting slowly sideways: the drawing is 1600 units wide and the card shows about
   half of it at a time, so the eye is pulled through the rooms rather than shown a thumbnail of them. The
   drift is 42 seconds for the whole width and it never stops, because it is a building full of people, not
   a slideshow. Anybody who asked for less motion gets it still. */
/* The one rebuilt piece that is not a piece of a product: it is a drawing, so it fills its card the way a
   photograph does rather than standing at product scale in the middle of a field. */
.c-quiet-index-card .mf-work.is-built > .qi-arch2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  scale: none;
  translate: none;
}
.qi-arch2 { position: relative; overflow: hidden; background: #fff; }
/* The card is a window onto the atrium, not a thumbnail of the whole tower.
   Showing all 1600 units of the section put a person at 33px in a 656px card, where a walk is a few pixels
   and reads as nothing at all — her words were that she could not see anyone moving. The window is 700
   units across instead, framed on the three groups that live in it: the couple crossing the bridge, the two
   standing and talking above them, and the person in the wheelchair. A figure is about 75px here, and a
   stride is a stride. The numbers are drawing units and test/arch-card.mjs cuts the still from the same
   window — if one changes, both change. The card's own 16/10 is what lets the top offset be said in width. */
.qi-arch2 { --bx: 500; --by: 1297; --bw: 700; }
/* .mf-work img sets width:100% and outranks a single class, which is why the window did nothing the first
   time: the offsets moved but the drawing stayed card-width. */
.qi-arch2 > .qi-arch2-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Contain, not cover: the point is that you can see the whole tower before you are taken into it. */
  object-fit: contain;
  object-position: center;
}
/* The still is already cut to the window — it fills the card. The drawing is the whole tower, so it is the
   one that has to be scaled and slid until the same window is showing. Placing both the same way was the
   bug: the crop got treated as if it were the whole sheet. */
.qi-arch2 > .qi-arch2-art.is-live {
  inset: auto;
  width: calc(1600 / var(--bw) * 100%);
  height: auto;
  left: calc(-1 * var(--bx) / var(--bw) * 100%);
  top: calc(-1 * var(--by) / var(--bw) * 160%);
  max-width: none;
  object-fit: fill;
}
/* The drift and the swap to the walking drawing are both off at her word (26 Oct): the card is the
   still. The megabyte SVG is still what the full-screen view opens, and is no longer fetched for the
   card at all — which is a megabyte a reader no longer pays for on the way past. */
/* The copy that grows. Fixed over the page, under the chrome and over everything else, catching nothing:
   the card underneath keeps the pointer, so pressing it still opens the whole section full screen. */
.qi-arch-zoom { position: fixed; z-index: 17; overflow: hidden; background: #fff; opacity: 0;
  pointer-events: none; box-shadow: var(--card-lift); will-change: left, top, width, height; }
.qi-arch-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  will-change: scale; }
:root[data-motion="reduced"] .qi-arch-zoom { display: none; }

/* the way in, in the corner where a drawing is usually signed */
.qi-arch2-open {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, #fff 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #161616;
  font: var(--l1-font);
  cursor: pointer;
}
.qi-arch2-open b { font-weight: 400; font-size: 15px; line-height: 1; }
@media (hover: hover) { .qi-arch2-open:hover { background: #fff; } }

/* ----- and the whole of it, full screen -----
   The card is a photograph of a crop; this is the drawing itself, 17,848 lines of it, fetched the first
   time anybody asks. Pressing it swaps between fitting the window and twice that — the whole building, then
   the floor with the people on it. */
.qi-archview {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.qi-archview.is-on { opacity: 1; }
.qi-archview-back { position: absolute; inset: 0; background: color-mix(in oklch, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qi-archview-pane {
  position: relative;
  max-width: min(96vw, 1100px);
  max-height: 88vh;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: 0 30px 90px -40px rgb(22 22 22 / 0.5);
}
.qi-archview-art { display: block; width: auto; height: auto; max-width: 100%; cursor: zoom-in; }
.qi-archview.is-near .qi-archview-art { max-width: none; width: 200%; cursor: zoom-out; }
.qi-archview-cap { position: absolute; left: 50%; bottom: 18px; margin: 0; translate: -50% 0; font: var(--l2-font); color: var(--muted); }
.qi-archview-x {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  top: clamp(12px, 3vw, 28px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 2px 10px rgb(22 22 22 / 0.12);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
:root[data-motion="reduced"] .qi-archview { transition: none; }

/* ----- why her: four cards that turn -----
   One card per claim, stacked in her reading column rather than spread wider than it: the three screenshots
   on the backs are 2x captures of real messages, and at the column's width they come out at very nearly 1:1,
   which is the only width they are readable at. Four cards side by side gave 164px columns and a claim one
   word to a line.

   Turning is a 3D flip, the one place on this site where something leaves the plane of the page — justified
   because the whole idea is that there is another side. 520ms, her own drawer easing. */
.c-quiet-index-why { margin-top: clamp(56px, 10vh, 96px); }
/* A bento, at the page's own width: the first claim takes two rows because it is the one the rest rest on,
   the second takes two columns, and the last two take a cell each. It used to break out past the reading
   column; it does not any more, at her word (2026-10-18) — everything on this page is one width. */
.c-quiet-index-whygrid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(188px, auto);
  gap: 14px;
}
.c-quiet-index-whycell { display: grid; perspective: 1600px; }
/* The first claim is the one the others rest on, so it is given the height rather than the width; the three
   that turn onto a saved message are given the width, because a screenshot of a message narrower than about
   400px is a picture of some writing rather than something anybody can read. At this page's width that
   works out at one tall cell and three wide ones. */
.c-quiet-index-whycell:nth-child(1) { grid-row: span 2; }
.c-quiet-index-whycell:nth-child(2),
.c-quiet-index-whycell:nth-child(3) { grid-column: span 2; }
.c-quiet-index-whycell:nth-child(4) { grid-column: span 3; }
.c-quiet-index-why1 {
  position: relative;
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  /* It does not turn any more, at her word. The claim and the proof behind it stand in the one card,
     one under the other, so nothing has to be pressed to be read. */
  cursor: default;
}
/* The turn. Both faces sit in the one cell and only the one facing you is painted; the whole card is
   rotated rather than its faces, so the back arrives the right way round. Each card goes a beat after
   the one before it, so the four read as a hand turning them rather than as one switch. */
.c-quiet-index-why1 { transform-style: preserve-3d; transition: rotate 640ms var(--ease-drawer); transition-delay: calc(var(--i, 0) * 70ms); }
.c-quiet-index-whycell { perspective: 1800px; }
.c-quiet-index-why1 > span { grid-area: 1 / 1; backface-visibility: hidden; }
.c-quiet-index-whygrid.is-turned .c-quiet-index-why1 { rotate: y 180deg; }
/* the back: its own share of one photograph, placed from mountWhy */
.c-quiet-index-why-m { rotate: y 180deg; background-repeat: no-repeat; background-color: var(--fill-2); }
/* The photograph itself is in the page for a reader with no JavaScript and for a search engine; the
   cards paint it, so it is not drawn twice. */
.c-quiet-index-why-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:root[data-motion="reduced"] .c-quiet-index-why1 { transition: none; }
/* the control, in the bar at the foot, which fades in while the section is on screen */
/* On this section the bar carries one thing and it is this, at her word (26 Oct): the copyright, her
   address and her CV step aside, because a bar offering four things offers nothing. It is the page's
   own primary — ink on paper, the same as the one the room carries. */
.qi-why-turn { display: inline-flex; align-items: center; justify-content: center; border: 0;
  border-radius: 999px; background: var(--ink); color: var(--paper);
  font: var(--l2-font); font-weight: 600; white-space: nowrap; cursor: pointer;
  opacity: 0; width: 0; padding: 7px 0; overflow: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease-out), width 300ms var(--ease-out), padding 300ms var(--ease-out), background-color 160ms var(--ease-out); }
.qi-why-turn.is-on { opacity: 1; width: auto; padding-inline: 20px; pointer-events: auto; }
.qi-why-turn:hover { background: color-mix(in oklch, var(--ink) 86%, var(--paper)); }
.qi-why-turn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Everything else in the bar makes way for it while the section is on screen. The hiding is done from
   mountWhy rather than here: say() writes this element's opacity and width inline as it crossfades, and
   an inline style wins over any rule written in this sheet. */
/* With one button in it the bar is a frame around that button, so the frame is the same on all four
   sides. Its usual padding is 4px over 12px, which is right for a line of text and reads as a lozenge
   pinched top and bottom once the thing inside it is a button of its own. */
.c-quiet-index-navg.is-cta { padding: 5px; min-height: 0; }
/* These four are the cards they always were, at her word: her sticker taped at the top of a tinted
   card with her claim at the foot of it. The card with the rim and the foil belongs to the telling -
   it is what each of these turns into once the sequence starts, and nowhere else. */
.c-quiet-index-why1 > span {
  display: flex;
  padding: clamp(20px, 3.4%, 28px);
  border-radius: calc(var(--r-l) + 8px);
  overflow: hidden;
}
/* the front: her sticker standing beside her claim, the way a sticker is taped beside a line of writing */
.c-quiet-index-why-f { flex-direction: column; justify-content: flex-end; gap: 10px; }
.c-quiet-index-why-s {
  width: auto;
  max-width: min(62%, 190px);
  height: auto;
  max-height: 104px;
  object-fit: contain;
  object-position: left bottom;
  margin-bottom: auto;
  align-self: flex-start;
}
.c-quiet-index-why-say { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* A claim in a 200px column set at heading size comes out one word to a line, with hyphens. This is the
   size at which every one of them holds together in the narrowest cell here. */
.c-quiet-index-why-f b { font: 500 var(--t-20) / 1.25 var(--font-display); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; hyphens: manual; }
.c-quiet-index-why-say > span { font: var(--l2-font); color: var(--body); text-wrap: pretty; }
/* the back: somebody else saying it */
.c-quiet-index-why-b {
  rotate: y 180deg;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  background: var(--raised);
}
.c-quiet-index-why-b.is-two { gap: clamp(14px, 3%, 22px); }
.c-quiet-index-why-one { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; flex: 1 1 0; min-width: 0; }
.c-quiet-index-why-q { font: var(--b3-font); color: var(--ink); text-wrap: pretty; }
.c-quiet-index-why-who { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 0; }
/* A face is a portrait, not a piece of work: it wants its own round frame rather than the work frame's
   ratio and padding, and the picture inside has to be told to fill it. */
.c-quiet-index-why-who .c-quiet-index-why-face {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  aspect-ratio: auto;
  border-radius: 999px;
  background: var(--fill);
}
.c-quiet-index-why-who .c-quiet-index-why-face :is(img, video) {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  padding: 0;
}
.c-quiet-index-why-who b { font: var(--l1-font); font-weight: 500; color: var(--ink); }
.c-quiet-index-why-who > span { font: var(--l2-font); color: var(--muted); }
/* A saved message: the capture at the width it was taken at, with the card's own padding all round it so it
   is never edge to edge, on the colour it is already on so the card and the message are one surface. The
   picture carries that padding itself, on top of the card's own, because a capture pressed up against a card
   edge reads as a thing pasted on — she asked for extra. */
.c-quiet-index-why-b.is-shot { justify-content: center; gap: 12px; }
.c-quiet-index-why-shot { display: block; padding: clamp(20px, 3.4%, 28px); }
.c-quiet-index-why-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-s); }
/* four shades of her own warmth on the fronts, never four brands */
.c-quiet-index-whycell:nth-child(1) .c-quiet-index-why-f { background: color-mix(in oklch, var(--accent) 13%, var(--paper)); }
.c-quiet-index-whycell:nth-child(2) .c-quiet-index-why-f { background: var(--fill-2); }
.c-quiet-index-whycell:nth-child(3) .c-quiet-index-why-f { background: color-mix(in oklch, var(--accent) 7%, var(--raised)); }
.c-quiet-index-whycell:nth-child(4) .c-quiet-index-why-f { background: var(--fill); }
@media (hover: hover) and (pointer: fine) {
  .c-quiet-index-why1:hover .c-quiet-index-why-f { filter: brightness(0.985); }
}
.c-quiet-index-why1:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: calc(var(--r-l) + 10px); }
:root[data-motion="reduced"] .c-quiet-index-why1 { transition: none; }
/* On a phone the sticker steps above the claim rather than beside it, and two voices stack. */
@media (max-width: 899.98px) {
  .c-quiet-index-whygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-quiet-index-whycell:nth-child(1) { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 599.98px) {
  .c-quiet-index-whygrid { grid-template-columns: minmax(0, 1fr); }
  .c-quiet-index-whycell:nth-child(1), .c-quiet-index-whycell:nth-child(2) { grid-column: auto; }
}

/* ----- an era arriving -----
   The head, her sentence and the work come up as the row enters, a beat apart, and stay. The distance is
   small on purpose: this is a page you read, and anything that travels far enough to notice is something you
   wait for rather than something that was already there when you looked. Only where there is script to let
   them in — the same is-live the strips wait on — so nothing is ever hidden from a reader without one. */
/* The chapter-level reveal stood here: name, words and work held at opacity 0 until an observer marked
   the chapter is-up. That observer was written for rows a third of a screen tall; a chapter is a track
   of several screens now and never satisfied it, so the name never arrived. The stack has an arrival of
   its own — each piece pins as it is reached — so this is taken out rather than retuned. */
.c-quiet-index-time.is-live .c-quiet-index-chapter :is(.c-quiet-index-org, .c-quiet-index-tldr, .c-quiet-index-strip) {
  opacity: 1;
  translate: none;
}
.c-quiet-index-time.is-live .c-quiet-index-chapter .c-quiet-index-tldr { transition-delay: 60ms; }
.c-quiet-index-time.is-live .c-quiet-index-chapter .c-quiet-index-strip { transition-delay: 120ms; }
.c-quiet-index-time.is-live .c-quiet-index-chapter.is-up :is(.c-quiet-index-org, .c-quiet-index-tldr, .c-quiet-index-strip) {
  opacity: 1;
  translate: 0 0;
}
:root[data-motion="reduced"] .c-quiet-index-time.is-live .c-quiet-index-chapter :is(.c-quiet-index-org, .c-quiet-index-tldr, .c-quiet-index-strip) {
  opacity: 1;
  translate: none;
  transition: none;
}

/* ---------- the rail ----------
   The timeline is a column of eras, and nothing in it said they stood in time: four companies, four pictures,
   four badges down the right-hand side. The rail says it. A hairline runs down the left margin from the first
   era's dot to the last one's — no further, so it never reaches up into her words or down into the collage —
   each era is a dot on it, and that era's years move out of the row and onto the line, right-aligned against
   it, so the badges read as the stations they always were rather than as a column of labels.

   The dot of the era you are reading takes the ink, the same moment its badge does (is-at, set by the
   navigator's own reading line) — so one thing moves down the rail as you read, and it is you.

   It is all drawn outwards from each row's own box into the margin the page already has: --railx is where the
   line falls, measured from the left edge of the work, and the years sit --railgap further out again. Which is
   what it costs: the widest badge needs about 150px of margin, and the page only has that from 1024px up. The
   measure of the work is 656px whatever the window, so below that the margin is wanted for the work itself and
   the years stay where they are, at the right end of their own row. */
@media (min-width: 1024px) {
  .c-quiet-index-time { --railx: 28px; --railgap: 14px; --raildot: 7px; }
  /* the line: each era draws its own stretch, from its dot down to the next era's, so an era that is folded
     open takes the line with it and there is nothing to keep in step. The last era has nowhere to run to.
     A row's own box ends where the next one starts, which is a head's half-height short of the next dot, so
     the stretch is let out by exactly that much and lands on it. Every row has the same head, so it always
     does. */
  /* A comb rather than a line, at her word (26 Oct): a short rule every eleven pixels down the margin,
     and where you are reading they grow. Both layers are the same gradient at two lengths — the short
     one is always drawn, the long one is masked to a soft band around the reading line, so what travels
     down the page as you scroll is the growing rather than anything moving. --at is where that line
     falls inside this era, set from mountTicks; with no script it is never set, the band never resolves
     and the comb is simply short the whole way down, which is a scale either way. */
  .c-quiet-index-chapter::before,
  .c-quiet-index-chapter::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: calc(var(--rowpt) + var(--head) / 2);
    bottom: calc((var(--rowpt) + var(--head) / 2) * -1);
    right: calc(100% + var(--railx));
    background-repeat: repeat-y;
  }
  .c-quiet-index-chapter::before {
    width: 7px;
    background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 11px);
  }
  /* the swell: the same comb, longer and darker, shown only around the reading line */
  .c-quiet-index-chapter::after {
    width: 17px;
    background-image: repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 11px);
    -webkit-mask-image: radial-gradient(100% 26vh at 100% var(--at, -300px), #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
    mask-image: radial-gradient(100% 26vh at 100% var(--at, -300px), #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
  }
  .c-quiet-index-chapter:last-child::before,
  .c-quiet-index-chapter:last-child::after { bottom: 0; }
  :root[data-motion="reduced"] .c-quiet-index-chapter::after { display: none; }
  /* The years, out of the row and onto the line. Absolute, so the flex head above forgets them entirely —
     and measured against the head itself rather than against the row: --rowpt and --head describe where the
     head is meant to be, and whatever else the row has grown since, the name is 32px down rather than 20,
     which left the years sitting a fifth of an inch below the company they belong to. Against the head's own
     box they are level with it whatever the row does. The row is still the horizontal reference: the head
     starts at the same x, so the right edge lands in the same place it always did. */
  .c-quiet-index-chapter .c-quiet-index-org { position: relative; }
  .c-quiet-index-chapter .c-quiet-index-org .c-quiet-index-years {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: calc(100% + var(--railx) + var(--railgap));
    padding-left: 0;
  }
}
@media (max-width: 719.98px) {
  .c-quiet-index-navg { --space: 0px; padding: 4px 10px; }
}
:root[data-motion="reduced"] .c-quiet-index-navg :is(.c-quiet-index-navd, .c-quiet-index-navp) { transition-delay: 0ms !important; }
:root[data-motion="reduced"] .c-quiet-index-navnow { transition: none; }
@supports (animation-timeline: view()) {
  :root[data-motion="full"] .c-quiet-index-chapter.is-settled :is(.c-anatomy-lci-open, .c-anatomy-lci-stage, .c-anatomy-lci-page, .c-anatomy-lci-site) {
    animation: c-anatomy-tie linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
}
.c-quiet-index-job { color: var(--body); }
.c-quiet-index-res { color: var(--body); }
.c-quiet-index-res b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.c-quiet-index-soon { display: inline-block; padding: 2px 7px; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--muted); font: var(--l3-font); letter-spacing: var(--l3-track); vertical-align: 1px; }
.c-quiet-index-item.is-soon .c-quiet-index-org { color: var(--muted); }
.c-quiet-index-item.is-soon :is(.c-quiet-index-years, .c-quiet-index-job) { color: var(--muted); }

/* secondary indexes */
/* ---------- Kind words: one collage of everything people said ----------
   Every message she saved and every testimonial, from all three eras, in one screenful under the timeline, laid
   out around her own sticker. KW above says where each piece goes and how big it is; the board turns those design
   units into real ones with its own width, and takes its width from whichever is smaller — the page, or the height
   that keeps the whole section to about one screen.

   Until mountCollage runs, none of that applies: the section is a plain column, every piece at a readable size,
   one under another, in her order. A pile is only worth making where a reader can pull a piece out of it, so a
   browser with no JavaScript is given the list rather than the collage. */
.c-quiet-index-kwboard {
  position: relative;
  left: 50%;
  width: min(560px, 92vw);
  margin-top: 0;
  translate: -50% 0;
  container-type: inline-size;
  /* a plain swipe down the collage is still the page scrolling; a piece takes the gesture over only sideways */
  touch-action: pan-y;
}
.c-quiet-index-kwin { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.c-quiet-index-kw { width: 100%; }
.c-quiet-index-kw.is-kudos { width: min(220px, 100%); }
.c-quiet-index-kw.is-me { width: min(260px, 100%); }

/* and once it can be rummaged through, it is the collage: the board at 1240 by 790 design units, scaled down
   only as far as the page or one screen's height asks for */
.c-quiet-index-kwboard.is-live { width: min(1240px, 92vw, max(1140px, calc((95vh - 96px) * 1240 / 790))); }
/* ---------- the shine off her sticker ----------
   Light coming off her, not a soft rectangle behind the pile. It radiates from her sticker's own centre — the
   collage puts her where her order puts her, and mountCollage measures that and hands it over as --shx/--shy,
   so the light follows her in the composition and in the phone's one lane alike.
   Two passes, and no more: a tight warm core in her own coral taken most of the way into the paper, and a wider,
   fainter one behind it in her fills, so the falloff reads as light rather than as one flat ring. It reaches
   nothing like the section's edges, so it never draws a boundary. It lies under every piece, takes no pointer,
   never touches a drag, and belongs to the collage: with no JavaScript there is the plain column and no light. */
/* --shx/--shy say where her sticker sits in the composition; --shdx/--shdy say how far she has been dragged
   from there. The light reads both, so picking her up and putting her somewhere else takes the light with her. */
.c-quiet-index-kwboard.is-live::before,
.c-quiet-index-kwboard.is-live::after {
  content: "";
  position: absolute;
  left: var(--shx, 50%);
  top: var(--shy, 51%);
  z-index: 0;
  translate: calc(-50% + var(--shdx, 0px)) calc(-50% + var(--shdy, 0px));
  pointer-events: none;
}
.c-quiet-index-kwboard.is-live::before {
  width: 150%;
  height: 170%;
  background:
    radial-gradient(26% 30% at 50% 50%,
      color-mix(in oklch, var(--accent-blush) 78%, transparent) 0%,
      color-mix(in oklch, var(--accent-blush) 38%, transparent) 44%,
      transparent 100%),
    radial-gradient(48% 52% at 50% 50%,
      color-mix(in oklch, var(--fill-2) 88%, transparent) 0%,
      color-mix(in oklch, var(--fill) 44%, transparent) 44%,
      transparent 86%);
  animation: c-quiet-index-breathe 7.5s var(--ease-out) infinite;
}
/* ---------- and the rays ----------
   The one anime thing on the site: the burst of light a character stands in when something matters. It is drawn
   the way that is drawn — hard-edged wedges radiating from her, not a soft glow — but at her strength rather
   than a comic's: the wedges are her own fill and her coral at a few percent, they fade out long before the
   collage's edge, and the whole wheel turns once every two minutes, which is slow enough that you notice the
   light moving without ever catching it move. It is under every piece, takes no pointer, and is gone entirely
   with motion turned down, where the soft halo alone does the job it always did. */
.c-quiet-index-kwboard.is-live::after {
  width: 165%;
  aspect-ratio: 1;
  height: auto;
  opacity: 0.78;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    color-mix(in oklch, var(--accent) 9%, transparent) 0deg 3.2deg,
    transparent 3.2deg 7.5deg,
    color-mix(in oklch, var(--line-2) 22%, transparent) 7.5deg 9.4deg,
    transparent 9.4deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 15%, #000 33%, #000 44%, transparent 64%);
  mask-image: radial-gradient(closest-side, transparent 15%, #000 33%, #000 44%, transparent 64%);
  animation: c-quiet-index-rays 120s linear infinite;
}
@keyframes c-quiet-index-rays {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
/* the light itself breathes: a slow swell and settle, about four percent, so her sticker reads as lit rather
   than as pasted onto a gradient */
@keyframes c-quiet-index-breathe {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 1.045; opacity: 0.9; }
}
:root[data-motion="reduced"] .c-quiet-index-kwboard.is-live::after { display: none; }
:root[data-motion="reduced"] .c-quiet-index-kwboard.is-live::before { animation: none; }
.is-live .c-quiet-index-kwin { --u: calc(100cqw / 1240); display: block; position: relative; height: calc(var(--u) * 790); }
.is-live .c-quiet-index-kw {
  position: absolute;
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * var(--y));
  z-index: var(--z, 1);
  width: calc(var(--u) * var(--w));
  rotate: var(--r, 0deg);
  translate: calc(var(--dx, 0) * 1px) calc(var(--dy, 0) * 1px);
  cursor: grab;
  touch-action: pan-y;
  transition: scale var(--d-press) var(--ease-out);
}
.is-live .c-quiet-index-kw > * { pointer-events: none; }
/* a saved message is its own picture, on its own background, with nothing drawn around it */
.c-quiet-index-kw.is-slack img, .c-quiet-index-kw.is-kudos img {
  width: 100%;
  height: auto;
  /* the shape the message is shown in: two of the screenshots came with white margins, and an <img> falls back to
     the picture's own ratio the moment it loads, so the crop has to be said here rather than left to the markup */
  aspect-ratio: var(--ar);
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent), 0 14px 30px -18px color-mix(in oklch, var(--ink) 26%, transparent);
}
.c-quiet-index-kw.is-me img { width: 100%; height: auto; }
/* held: the piece comes up a little and goes over everything else. It follows the pointer exactly, so there is
   nothing here but the lift. */
.is-live .c-quiet-index-kw.is-lift { cursor: grabbing; scale: 1.035; }
.is-live .c-quiet-index-kw.is-lift :is(.c-anatomy-msg, img) { box-shadow: 0 2px 4px color-mix(in oklch, var(--ink) 10%, transparent), 0 22px 44px -22px color-mix(in oklch, var(--ink) 32%, transparent); }
.is-live .c-quiet-index-kw.is-lift.is-me img { box-shadow: none; filter: drop-shadow(0 16px 20px color-mix(in oklch, var(--ink) 22%, transparent)); }
.c-quiet-index-kwin.is-moving { user-select: none; -webkit-user-select: none; }
/* reduced motion: a piece still moves, it simply does not rise to do it */
:root[data-motion="reduced"] .c-quiet-index-kw { transition: none; }
:root[data-motion="reduced"] .c-quiet-index-kw.is-lift { scale: 1; }

/* Below the width the collage needs, it becomes one tucked lane: the pieces keep their order and their tilt, the
   four she ranked first stand clear at the top, and the rest fan over one another like slips in a pile — pull one
   out to read the whole of it. Nothing is left out, and with no JavaScript it is the plain column again. */
@media (max-width: 1179.98px) {
  /* the lane never grows much past the width it was drawn at: how far a piece tucks up over its neighbour is
     written in the same units as its own width, and a much wider lane makes shorter cards and deeper tucks */
  .c-quiet-index-kwboard.is-live { width: min(420px, 92vw); }
  /* her sticker is still the centre of the lane, so the shine still comes off it — only smaller, because the
     lane is. --shx/--shy put it on her wherever the pile has left her. */
  .c-quiet-index-kwboard.is-live::before { width: 190%; height: 70%; }
  .c-quiet-index-kwboard.is-live::after { width: 220%; }
  .is-live .c-quiet-index-kwin {
    --u: calc(100cqw / 390);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    height: auto;
    /* a little air inside the lane, so a tilted piece still sits inside the board it is held to */
    padding: 10px 12px 12px;
  }
  /* in one lane the pile reads downwards, so what lies over what is simply the order they are written in: each
     piece tucks up over the body of the one before it, leaving its name and its opening showing */
  .is-live .c-quiet-index-kw {
    position: relative;
    left: auto;
    top: auto;
    z-index: auto;
    width: calc(var(--u) * var(--mw));
    margin: calc(var(--u) * var(--mt)) 0 0 calc(var(--u) * var(--mx));
  }
}
.c-quiet-index-mini { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline; }
.c-quiet-index-mini > .c-quiet-index-label { grid-column: 1; margin: 0; }
.c-quiet-index-pairs { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; row-gap: 8px; list-style: none; margin: 0; padding: 0; }
.c-quiet-index-pairs li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.c-quiet-index-pairs li > :first-child { color: var(--ink); font-weight: 500; }
.c-quiet-index-pairs li > :last-child { grid-column: 2 / -1; color: var(--body); }

/* the big floating preview: the asset at its own ratio, beside the cursor */
.c-quiet-index-pv {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 24;
  width: clamp(420px, 42vw, 680px);
  pointer-events: none;
  opacity: 0;
  scale: 0.96;
  transform-origin: 0 50%;
  transition-property: opacity, scale;
  transition-duration: 180ms, 240ms;
  transition-timing-function: var(--ease-out);
  will-change: transform;
}
.c-quiet-index-pv.is-on { opacity: 1; scale: 1; }
.c-quiet-index-pv-item { filter: drop-shadow(0 2px 6px oklch(0.2 0.02 265 / 0.07)) drop-shadow(0 30px 62px oklch(0.2 0.02 265 / 0.24)); }
@media (hover: none), (pointer: coarse) {
  .c-quiet-index-pv { display: none; }
}
/* ideas: the day carries the date, a small time sits beside the words, the clip runs inline */
.c-quiet-index-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 14px; }
.c-quiet-index .mf-compose { margin-bottom: 44px; }
.c-quiet-index-stream { display: flex; flex-direction: column; gap: 44px; }
.c-quiet-index-day { display: flex; flex-direction: column; gap: 20px; }
.c-quiet-index-dayh { font: var(--l1-font); font-weight: 600; color: var(--ink); }
.c-quiet-index-daylist { display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 0; list-style: none; }
.c-quiet-index-ihead { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 24px; margin-top: clamp(40px, 8vh, 72px); }
.c-quiet-index-ihead > .c-quiet-index-intro { margin-top: 0; }
.c-quiet-index-write { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font: var(--l1-font); font-weight: 500; text-decoration: none; transition: border-color var(--d-state) var(--ease-out), scale var(--d-press) var(--ease-out); }
.c-quiet-index-write:active { scale: 0.97; }
@media (hover: hover) { .c-quiet-index-write:hover { border-color: var(--line-2); } }
.c-quiet-index-feed { display: flex; flex-direction: column; gap: 34px; margin: 40px 0 0; padding: 0; list-style: none; }
.c-quiet-index-fdate { font: var(--l3-font); letter-spacing: var(--l3-track); color: var(--muted); white-space: nowrap; }
.c-quiet-index-fitem { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 18px; align-items: baseline; }
.c-quiet-index-fitem[hidden] { display: none; }
.c-quiet-index-fitem > .mf-time { font: var(--l3-font); letter-spacing: var(--l3-track); }
.c-quiet-index-fbody { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c-quiet-index-ftitle { font: var(--b2-font); font-weight: 600; color: var(--ink); }
.c-quiet-index-ftext { max-width: 54ch; font: var(--b2-font); color: var(--ink); text-wrap: pretty; }
.c-quiet-index-fitem[data-kind="essay"] .c-quiet-index-ftext { margin-top: -2px; color: var(--body); }
.c-quiet-index-fmedia { width: min(100%, 30rem); margin-top: 2px; }
.c-quiet-index-fmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: var(--l2-font); color: var(--muted); }
/* The essay toggle in Ideas: one quiet line. Its two words sit one on top of the other, so the button is as wide
   as the longer of them whichever it is showing, and pressing it never slides the target out from under the
   pointer. The timeline's own toggle is a pill, up in the timeline's block, and keeps the same trick. */
.c-quiet-index-fmore {
  display: inline-grid;
  grid-template-areas: "label";
  justify-items: start;
  color: var(--ink);
  font: var(--l1-font);
  font-weight: 500;
}
.c-quiet-index-fmore span {
  grid-area: label;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--d-state) var(--ease-out);
}
@media (hover: hover) { .c-quiet-index-fmore:hover span { text-decoration-color: var(--ink); } }
.c-quiet-index-fmore span + span { visibility: hidden; }
.c-quiet-index-fmore[aria-expanded="true"] span { visibility: hidden; }
.c-quiet-index-fmore[aria-expanded="true"] span + span { visibility: visible; }
.c-quiet-index-fwords { font-variant-numeric: tabular-nums; }
.c-quiet-index-fread { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 285ms var(--ease-drawer); }
.c-quiet-index-fitem.is-open .c-quiet-index-fread { grid-template-rows: 1fr; transition-duration: 380ms; }
.c-quiet-index-fread-in { min-height: 0; overflow: hidden; }
.c-quiet-index-fread-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 54ch;
  padding-top: 12px;
  font: var(--b2-font);
  color: var(--ink);
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 220ms var(--ease-out), translate 285ms var(--ease-out);
}
.c-quiet-index-fitem.is-open .c-quiet-index-fread-body { opacity: 1; translate: 0 0; transition-duration: 300ms, 380ms; transition-delay: 80ms; }
.c-quiet-index-tfoot { margin-top: 72px; padding-top: 0; font: var(--b3-font); color: var(--body); }

/* cases index: a grid of covers, not rows */
.c-quiet-index-casegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin: clamp(32px, 6vh, 56px) 0 0; padding: 0; list-style: none; }
.c-quiet-index-case { display: flex; flex-direction: column; gap: 14px; }
.c-quiet-index-casecover { display: block; border-radius: var(--r-l); transition: opacity var(--d-state) var(--ease-out); }
.c-quiet-index-casecover .mf-work,
.c-quiet-index-casecover .mf-media { border-radius: var(--r-l); }
@media (hover: hover) { .c-quiet-index-casecover:hover { opacity: 0.9; } }
.c-quiet-index-case.is-soon .c-quiet-index-casecover { opacity: 0.7; }
.c-quiet-index-caseline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; font: var(--b3-font); text-decoration: none; }
.c-quiet-index-caseline .c-quiet-index-org { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* case study */
.c-quiet-index-cover { margin: 4px 0 28px; }
.c-quiet-index-cover.mf-work,
.c-quiet-index-cover.mf-media { border-radius: var(--r-l); }

.c-quiet-index-shead { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.c-quiet-index-smeta { font: var(--l2-font); color: var(--muted); }
.c-quiet-index-stitle { font: var(--h1-font); letter-spacing: var(--h1-track); color: var(--ink); }
.c-quiet-index-ssub { font: var(--b2-font); color: var(--body); }
.c-quiet-index-slede { max-width: 58ch; margin-top: 20px; font: var(--b1-font); color: var(--ink); }

.c-quiet-index-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 16px 24px; margin: 40px 0; padding: 0; }
.c-quiet-index-outcomes div { display: flex; flex-direction: column; gap: 4px; }
.c-quiet-index-outcomes dd { order: -1; font: var(--h2-font); letter-spacing: var(--h2-track); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.c-quiet-index-outcomes dt { max-width: 24ch; font: var(--l2-font); color: var(--muted); }

.c-quiet-index-sections { margin-top: 12px; }
.c-quiet-index-secitem { padding-block: 8px; }
.c-quiet-index-srow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 48px); align-items: start; padding: 32px 10px; margin-inline: -10px; }
.c-quiet-index-smedia { order: 1; display: flex; flex-direction: column; gap: 12px; }
.c-quiet-index-scontent { order: 2; display: flex; flex-direction: column; gap: 14px; font: var(--b3-font); color: var(--body); }
.c-quiet-index-secitem.is-alt .c-quiet-index-srow { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.c-quiet-index-secitem.is-alt .c-quiet-index-smedia { order: 2; }
.c-quiet-index-secitem.is-alt .c-quiet-index-scontent { order: 1; }
.c-quiet-index-secitem.is-textonly .c-quiet-index-srow { grid-template-columns: minmax(0, 1fr); max-width: 60ch; }
.c-quiet-index-snum { font: var(--l3-font); letter-spacing: var(--l3-track); color: var(--muted); }
.c-quiet-index-stitle2 { font: var(--h3-font); letter-spacing: var(--h3-track); font-weight: 600; color: var(--ink); }
.c-quiet-index-scontent ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 1.1em; color: var(--ink); }
.c-quiet-index-sextra { display: flex; flex-wrap: wrap; gap: 10px; }
.c-quiet-index-sextra > * { flex: 1; min-width: 140px; }

.c-quiet-index-note { max-width: 60ch; margin-top: 24px; font: var(--l2-font); color: var(--muted); }
.c-quiet-index-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-top: 72px; padding-top: 0; font: var(--b3-font); color: var(--body); }
.c-quiet-index-next { font-weight: 500; }
@media (max-width: 720px) {
  .c-quiet-index { margin-left: 0; }
}
@media (max-width: 640px) {
  /* the same 72px of room under the pill as at any other width, so no page starts inside its fade */
  .c-quiet-index { --c1: 5.5rem; --gap: 12px; --navspace: 72px; }
  .c-quiet-index-nav { gap: 6px; padding: 4px 5px 4px 4px; }
  .c-quiet-index-navlinks a { min-width: 3.9rem; padding: 6px 9px; }
  .c-quiet-index.is-case { --navspace: 108px; }
  .c-quiet-index-projs { top: 54px; }
  .c-quiet-index-projs a { min-width: 0; padding: 5px 9px; }
  .c-quiet-index-intro { font: var(--h3-font); letter-spacing: var(--h3-track); }
  .c-quiet-index-casegrid { grid-template-columns: 1fr; gap: 32px; }
  .c-quiet-index-srow { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; padding-block: 24px; }
  .c-quiet-index-secitem .c-quiet-index-smedia,
  .c-quiet-index-secitem.is-alt .c-quiet-index-smedia { order: 1; }
  .c-quiet-index-secitem .c-quiet-index-scontent,
  .c-quiet-index-secitem.is-alt .c-quiet-index-scontent { order: 2; }
  /* the timeline stacks the way it reads wide, only narrower: the row head — mark, company, years — then her
     sentence, then the work at the full width of the phone. The head stays one line; a long company name wraps
     against the badge rather than pushing it off, because the badge is what the thumb is going for. */
  .c-quiet-index-chapter .c-quiet-index-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 6px 10px 30px; }
  .c-quiet-index-chapter .c-quiet-index-org { gap: 10px; }
  .c-quiet-index-chapter .c-quiet-index-org .c-quiet-index-years { padding-left: 10px; }
  .c-quiet-index-chapter .c-quiet-index-sub { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
  .c-quiet-index-shot { grid-column: 1; grid-row: 2; margin-top: 14px; }
  .c-quiet-index-chapter .c-quiet-index-org .mf-logo { --s: 28px !important; }
  .c-quiet-index-fold { grid-column: 1; grid-row: 3; margin-top: 16px; }
  .c-quiet-index-read-body { padding-top: 20px; }
  .c-quiet-index-tail { display: none; }
  .c-quiet-index-fitem { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .c-quiet-index-ftext,
  .c-quiet-index-fread-body { font: var(--b2-font); }
  .c-quiet-index-mini { display: block; }
  .c-quiet-index-mini > .c-quiet-index-label { margin-bottom: 10px; }
  .c-quiet-index-pairs,
  .c-quiet-index-pairs li { grid-template-columns: var(--c1) minmax(0, 1fr); column-gap: var(--gap); }
  .c-quiet-index-pairs li > :last-child { grid-column: 2; }
}

/* ---------- Quiet index · gallery miniature ----------
   One 7s loop: the cursor visits rows 2, 4, 3 and a large preview follows beside it, 200ms late.
   The navigation floats above as a pill. Negative delays park the paused frame mid-hover. */
.t-quiet-index-scene { position: absolute; inset: 0; }
.t-quiet-index-page { position: absolute; inset: 0; padding: 11cqw 12cqw 0; }
.t-quiet-index-intro { display: block; width: var(--w); height: 2.6cqw; margin-top: 1.4cqw; border-radius: 1.2cqw; background: var(--fill-2); }
.t-quiet-index-intro.is-first { margin-top: 3cqw; }
.t-quiet-index-rows { display: block; margin-top: 4cqw; border-bottom: 1px solid var(--line); }
.t-quiet-index-row {
  display: grid;
  grid-template-columns: 11fr 13fr 24fr 20fr;
  gap: 2.4cqw;
  align-items: center;
  height: 6.2cqw;
  border-top: 1px solid var(--line);
  animation: t-quiet-index-r0 7s var(--ease-out) -1.3s infinite;
}
.t-quiet-index-row i { display: block; width: var(--w); height: 1.5cqw; border-radius: 1cqw; background: var(--fill-2); }
.t-quiet-index-row i:nth-child(2) { background: var(--line-2); }
.t-quiet-index-row.is-soon i { background: var(--fill); }
.t-quiet-index-row.is-r2 { animation-name: t-quiet-index-r2; }
.t-quiet-index-row.is-r3 { animation-name: t-quiet-index-r3; }
.t-quiet-index-row.is-r4 { animation-name: t-quiet-index-r4; }

.t-quiet-index-pill {
  position: absolute;
  left: 50%;
  top: 4cqw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.7cqw;
  padding: 1.1cqw 2cqw 1.1cqw 1.1cqw;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 1.4cqw 3cqw -1.6cqw oklch(0.2 0.02 265 / 0.3);
  transform: translateX(-50%);
}
.t-quiet-index-pill > b { display: block; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--fill-2); }
.t-quiet-index-pill i { position: relative; z-index: 1; display: block; width: var(--w); height: 1.4cqw; border-radius: 1cqw; background: var(--fill-2); }
.t-quiet-index-pill > i { background: var(--line-2); }
/* the three pages, with the indicator resting behind the current one */
.t-quiet-index-navs { position: relative; display: flex; align-items: center; gap: 1.7cqw; }
.t-quiet-index-navs em { position: absolute; left: -1.2cqw; top: 50%; width: 8.4cqw; height: 3.6cqw; border-radius: 999px; background: var(--fill); translate: 0 -50%; }

.t-quiet-index-pv {
  position: absolute;
  left: 4cqw;
  top: -10.65cqw;
  z-index: 2;
  width: 34cqw;
  height: 21.3cqw;
  animation: t-quiet-index-path 7s var(--ease-drawer) -1.1s infinite;
}
.t-quiet-index-media {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2cqw;
  background: repeating-linear-gradient(135deg, transparent 0 1.6cqw, var(--hatch) 1.6cqw 1.9cqw), var(--fill);
  box-shadow: 0 2cqw 5cqw -2cqw oklch(0.2 0.02 265 / 0.35);
  transform-origin: 0 50%;
  animation: t-quiet-index-card 7s var(--ease-out) -1.1s infinite;
}
.t-quiet-index-cur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 2.2cqw;
  height: 3cqw;
  background: var(--body);
  clip-path: polygon(0 0, 100% 62%, 58% 66%, 80% 100%, 62% 100%, 42% 72%, 0 88%);
  animation: t-quiet-index-path 7s var(--ease-drawer) -1.3s infinite;
}

@keyframes t-quiet-index-path {
  0% { transform: translate(34cqw, 66cqw); }
  8% { transform: translate(30cqw, 33.4cqw); }
  28% { transform: translate(31cqw, 33.9cqw); }
  34% { transform: translate(33cqw, 45.8cqw); }
  56% { transform: translate(32cqw, 46.3cqw); }
  62% { transform: translate(27cqw, 39.6cqw); }
  82% { transform: translate(28cqw, 40.1cqw); }
  90%, 100% { transform: translate(34cqw, 66cqw); }
}
@keyframes t-quiet-index-card {
  0%, 7% { opacity: 0; transform: scale(0.96); }
  12%, 82% { opacity: 1; transform: scale(1); }
  87%, 100% { opacity: 0; transform: scale(0.96); }
}
@keyframes t-quiet-index-r0 {
  0%, 6% { opacity: 1; }
  9%, 86% { opacity: 0.45; }
  90%, 100% { opacity: 1; }
}
@keyframes t-quiet-index-r2 {
  0%, 30% { opacity: 1; }
  33%, 86% { opacity: 0.45; }
  90%, 100% { opacity: 1; }
}
@keyframes t-quiet-index-r4 {
  0%, 6% { opacity: 1; }
  9%, 30% { opacity: 0.45; }
  33%, 58% { opacity: 1; }
  61%, 86% { opacity: 0.45; }
  90%, 100% { opacity: 1; }
}
@keyframes t-quiet-index-r3 {
  0%, 6% { opacity: 1; }
  9%, 58% { opacity: 0.45; }
  61%, 100% { opacity: 1; }
}


/* ----- the hero: a room full of her -----
   Every number is the reference's, measured: 150px figures on a brick grid, transform-origin 50% 72% so a
   figure grows from where she stands rather than from her middle, hover scale 1.06 in 90ms, the nearest one
   at brightness 1.18 for 220ms over a 260ms filter, and a 320ms wobble when she is poked. */
/* The room is the window, not the column. Everything else on this page reads at the measure; a crowd that
   stopped at the measure would be a picture of a crowd on a page, which is the opposite of standing in one.
   The margins are exact rather than viewport units — 50% of the column plus 50% of the window — so it lands
   on the window's edges whether or not there is a scrollbar, and the page's own top padding is given back
   underneath so the card still clears the floating nav. */
.c-quiet-index-crowdhero {
  --fig: 150px;
  --hero-top: calc(var(--navspace) + clamp(8px, 4vh, 56px));
  margin-inline: calc(50% - 50vw);
  margin-top: calc(0px - var(--hero-top));
  padding-top: var(--hero-top);
  /* the column's own gutter, given back to the card now that the room ignores the column */
  padding-inline: var(--pad);
  /* the room is as tall as the rows in it, which script measures; 95vh until it has */
  min-height: var(--room, 95vh);
  overflow: hidden;
  touch-action: manipulation;
}
/* Air under the room. The words-only hero handed straight over to the timeline because it was mostly air
   itself; a crowd that ends on a whole row is a hard edge, and the first era arriving right against it meant
   a scroll landed with Miro jammed against the top of the screen. This is the gap that lets it land in the
   middle instead. */
.c-quiet-index-crowdhero + .c-quiet-index-sec { margin-top: clamp(96px, 26vh, 280px); }

/* the room is the whole hero, the glass nav floating over it rather than sitting above it */
.qi-crowd { position: absolute; inset: 0; }
.qi-crowd-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.qi-crowd-layer.is-back { z-index: 0; }
.qi-crowd-layer.is-front { z-index: 20; }
.qi-crowd-f {
  position: absolute;
  width: var(--fig);
  height: var(--fig);
  background-image: var(--art);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  transform: translate(-50%, 0) scale(var(--s, 1)) scaleX(var(--sx, 1));
  transform-origin: 50% 72%;
  /* No filter at rest, and none in the transition. brightness(1) changes nothing on the screen and
     costs a paint path per element; with a hundred and thirty-five of them, and filter transitioning on
     every one of them each time a character is picked, that was most of what made the sequence stutter
     and left the screen blank while the browser caught up. Only the picked one is filtered now. */
  transition: transform 90ms cubic-bezier(0.2, 0, 0, 1), opacity 320ms ease;
  user-select: none;
}
.qi-crowd-f.is-near { --s: 1.06; }
.qi-crowd-f.is-lit { filter: brightness(1.18) saturate(1.1); }
.qi-crowd-f.is-poked { animation: qi-crowd-poke 320ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes qi-crowd-poke {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -5deg; }
  55% { rotate: 4deg; }
  80% { rotate: -2deg; }
}
/* Nothing here turns movement off for a reader who asked for less of it: theme.css already collapses every
   transition on the page to a 120ms fade and every animation to a single 1ms frame, and the lean, the light
   and the wobble are all skipped in script besides. */

/* ----- the filter -----
   A press picks that whole character out of the room: every other one falls back to a quarter strength
   and every copy of her, front row and back, stays at full. A transition rather than a repaint, so the
   crowd settles into the filter instead of snapping into it. */
.c-quiet-index-crowdhero.is-filtered .qi-crowd-f { opacity: 0.25; }
/* The picked one gets the edge a holographic sticker has: four drop-shadows, one per direction, each a
   different pastel, which together trace the drawing's own silhouette rather than a box around it, and a
   white bloom over the top. drop-shadow follows alpha, which is why this hugs her outline where an
   outline or a border would only find the element's rectangle. */
.c-quiet-index-crowdhero.is-filtered .qi-crowd-f.is-picked {
  opacity: 1;
  /* One shadow, not five. Each drop-shadow is its own pass over the drawing's alpha, and this element
     changes every beat; five of them was most of what made the sequence stutter. */
  filter: drop-shadow(0 0 7px rgb(255 255 255 / 0.95));
}
.qi-crowd-f { transition: transform 90ms cubic-bezier(0.2, 0, 0, 1), filter 260ms ease, opacity 320ms ease; }

/* ----- her line, on a sticker in the middle of the room -----
   The card is one more sticker in the room, so it is cut the way the drawings are: a thick white edge all
   the way round, the page's own paper as the fill rather than a lifted white, and the shadow a sticker
   casts lying on top of the others. background-clip keeps the paper inside the padding box so the border
   stays a clean rim. It is a square, and the square is what fixes its size: the eight lines are different
   lengths, and a card that grew and shrank under each one would push the crowd around it every time
   somebody pressed a drawing. */
.qi-crowd-stack {
  position: relative;
  z-index: 10;
  align-self: center;
  display: grid;
  place-items: center;
}
.qi-crowd-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(56vw, 240px);
  aspect-ratio: 1;
  padding: clamp(12px, 1.9vw, 16px);
  /* The rim, named, so the fill inside it can round itself by the same amount the rim takes away. */
  --rim: clamp(9px, 1.5vw, 14px);
  border: var(--rim) solid var(--sticker-edge, #fff);
  /* Four pixels off, which the rim then takes off the fill behind it as well: the inner corner
     was rounder than the drawings' own die cut and read as a bubble rather than a sticker. */
  border-radius: calc(var(--r-l) + 6px);
  background: var(--paper);
  background-clip: padding-box;
  box-shadow:
    0 1px 1px color-mix(in oklch, var(--ink) 7%, transparent),
    0 10px 22px color-mix(in oklch, var(--ink) 14%, transparent),
    0 34px 70px color-mix(in oklch, var(--ink) 10%, transparent);
  text-align: center;
  /* Foil. --mx/--my are where the light is, in per cent of the card; --holo is how strong it is. It keeps
     a little at rest so it still reads as foil standing still. overflow keeps the sheen inside the die
     cut, so the white rim stays a rim. */
  --mx: 50%;
  --my: 50%;
  --holo: 0.45;
  overflow: hidden;
  /* A hair off solid, at her word (22 Oct): just enough that the crowd behind it is present through the
     card rather than stopped by it. */
  opacity: 0.99;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}
/* The two foil layers sit above the paper and below the words, which is where a foil actually is: the card
   is printed on it. Both are painted inside the card's own stacking context, so the blend never reaches
   the crowd behind it. */
.qi-crowd-card::before,
.qi-crowd-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* The inner corner is the outer one less the rim, which is what the card's own padding box is clipped
     to. Inheriting handed these the OUTER radius while they sat inside the rim, so the fill curved wider
     than the die cut and left a gap at each corner (22 Oct). */
  border-radius: calc(var(--r-l) + 6px - var(--rim));
  pointer-events: none;
  transition: opacity 300ms ease, background-position 180ms linear;
}
/* The rainbow. Every blend mode is a dead end on a sheet this light: color-burn barely moves it and dodge
   and overlay blow it out to flat white. So the bands are painted over the paper at low alpha, and the
   foil quality comes from the mask instead: colour only where the light is, falling off to nothing at the
   edges, which is what makes it read as something catching the light rather than as printed stripes. */
.qi-crowd-card::before {
  background: repeating-linear-gradient(
    112deg,
    #ff8f8b 0%, #ffe892 5%, #9ff0a8 10%, #8fe6ff 15%,
    #9aa8ff 20%, #e39bff 25%, #ff8f8b 30%);
  background-size: 240% 240%;
  background-position: var(--mx) var(--my);
  opacity: calc(var(--holo) * 0.42);
  -webkit-mask-image: radial-gradient(farthest-side circle at var(--mx) var(--my),
    #000 0%, rgb(0 0 0 / 0.75) 26%, transparent 72%);
  mask-image: radial-gradient(farthest-side circle at var(--mx) var(--my),
    #000 0%, rgb(0 0 0 / 0.75) 26%, transparent 72%);
}
/* The light itself. On a light card the readable part of a glare is not the bright spot, which is invisible
   against the paper, but the fall-off away from it. */
.qi-crowd-card::after {
  background:
    radial-gradient(farthest-corner circle at var(--mx) var(--my),
      rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 34%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my),
      color-mix(in oklch, var(--ink) 0%, transparent) 38%,
      color-mix(in oklch, var(--ink) 11%, transparent) 100%);
  opacity: calc(0.45 + var(--holo) * 0.55);
}
/* The words are printed on the foil, so they are the one thing above it. */
.qi-crowd-line,
.qi-crowd-ctas { position: relative; z-index: 1; }
.qi-crowd-line {
  margin: 0;
  max-width: 100%;
  font: 600 clamp(1.05rem, 0.97rem + 0.9vw, 1.45rem) / 1.18 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* Quiet enough to belong to the card: a soft tint of its own ink, with nothing around it. Cut as little
   stickers in their own right they put a second rim and a second shadow inside a card that already has
   both, and read as objects sitting on it rather than as part of it. */
.qi-crowd-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.qi-crowd-ctas[hidden] { display: none; }
.qi-crowd-cta {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 6%, transparent);
  color: color-mix(in oklch, var(--ink) 70%, transparent);
  font: 500 var(--t-13) / 1 var(--font);
  text-decoration: none;
  transition: background var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out);
}
/* With nothing to be primary against, the one button takes the solid treatment outright. */
.qi-crowd-cta.is-lead { background: var(--ink); color: var(--paper); }
@media (hover: hover) {
  .qi-crowd-cta:hover { background: color-mix(in oklch, var(--ink) 12%, transparent); color: var(--ink); }
}

/* ----- what comes out from behind her -----
   Two of her characters bring something with them. Both rings hang off the card's own middle, which script
   measures: collapsed halfway in at rest, out to their own place when their character is picked. They sit
   under the card and over the crowd behind it, and under the front row, so they read as coming out from
   behind her rather than as a panel laid on top. */
.qi-crowd-proof,
.qi-crowd-prs,
.qi-crowd-merged,
.qi-crowd-react,
.qi-crowd-dna {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.qi-crowd-post,
.qi-crowd-org,
.qi-crowd-chart {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  position: absolute;
  margin: 0;
  translate: calc(-50% + var(--x) * 0.5) calc(-50% + var(--y) * 0.5);
  rotate: var(--r);
  scale: 0.9;
  opacity: 0;
  transition:
    translate 460ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease;
  transition-delay: calc(var(--i) * 70ms);
}
.c-quiet-index-crowdhero.is-proof .qi-crowd-post,
.c-quiet-index-crowdhero.is-dna .qi-crowd-org,
.c-quiet-index-crowdhero.is-merged .qi-crowd-chart {
  translate: calc(-50% + var(--x)) calc(-50% + var(--y));
  scale: 1;
  opacity: 1;
}

/* A message as it looked when it arrived. */
.qi-crowd-post {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 244px;
  padding: 11px 13px 12px;
  border-radius: 10px;
  background: var(--slack);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.18), 0 18px 34px -18px rgb(0 0 0 / 0.55);
}
.qi-crowd-post:nth-child(1) { --x: -186px; --y: -64px; --r: -6deg; }
.qi-crowd-post:nth-child(2) { --x:  188px; --y: -80px; --r:   5deg; }
.qi-crowd-post:nth-child(3) { --x: -152px; --y: 106px; --r:   4deg; }
.qi-crowd-post:nth-child(4) { --x:  160px; --y: 114px; --r:  -5deg; }
.qi-crowd-face {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: #2b2f36;
}
.qi-crowd-face img { width: 100%; height: 100%; object-fit: cover; }
/* Slack's own fallback: the initial on a tile coloured from the name. */
.qi-crowd-face b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: hsl(var(--hue) 46% 38%);
  color: #fff;
  font: 700 15px / 1 var(--font);
}
.qi-crowd-crop { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
.qi-crowd-postbody { display: grid; gap: 4px; min-width: 0; }
.qi-crowd-postbody b { font: 700 var(--t-13) / 1.2 var(--font); color: var(--slack-ink); }
.qi-crowd-postbody q { font: 400 var(--t-12) / 1.5 var(--font); color: var(--slack-body); quotes: none; }
.qi-crowd-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.qi-crowd-reacts i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}
.qi-crowd-reacts em { font: 600 10px / 1 var(--font); font-style: normal; color: #c8cdd3; }

/* The field it was all merged into, in GitHub's light theme rather than its dark one: the rest of this
   page is her paper, and a black panel on it read as a window from another application rather than as
   something of hers. Same four greens, which are the same in both themes; everything around them is the
   light set. */
.qi-crowd-chart {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 13px 15px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d8dee4, 0 2px 4px rgb(31 35 40 / 0.08), 0 24px 50px -24px rgb(31 35 40 / 0.4);
  --x: 6px;
  --y: -227px;
  --r: -2deg;
}
.qi-crowd-ghrepo { display: flex; align-items: center; gap: 7px; }
.qi-crowd-octo { width: 15px; height: 15px; flex-shrink: 0; color: #1f2328; }
.qi-crowd-ghrepo b { font: 600 var(--t-12) / 1.2 var(--font); color: #1f2328; }
.qi-crowd-ghrepo em {
  padding: 2px 6px 3px;
  border-radius: 999px;
  background: rgb(130 80 223 / 0.1);
  font: 500 9.5px / 1 var(--mono);
  font-style: normal;
  color: var(--merged);
}
/* The note sits above the squares rather than under them: the card comes up out of the top of hers, so
   anything below the grid is behind her, and the one line saying which half of this is real would be the
   half nobody can read. */
/* The key, in GitHub's own words and GitHub's own order. */
.qi-crowd-ghfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
.qi-crowd-ghfoot i {
  font: 400 9.5px / 1.2 var(--font);
  font-style: normal;
  color: rgb(31 35 40 / 0.45);
}
.qi-crowd-ghkey {
  display: flex;
  align-items: center;
  gap: 3px;
  font: 400 9.5px / 1.2 var(--font);
  color: rgb(31 35 40 / 0.55);
}
.qi-crowd-ghkey i { width: 9px; height: 9px; border-radius: 2px; margin: 0 1px; }
.qi-crowd-ghkey i[data-v="0"] { background: #ebedf0; }
.qi-crowd-ghkey i[data-v="1"] { background: #9be9a8; }
.qi-crowd-ghkey i[data-v="2"] { background: #40c463; }
.qi-crowd-ghkey i[data-v="3"] { background: #30a14e; }
.qi-crowd-ghkey i[data-v="4"] { background: #216e39; }
.qi-crowd-gh {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
}
/* GitHub's light scale, which is the one most people picture when they picture this graph. */
.qi-crowd-gh i { width: var(--sq, 12px); height: var(--sq, 12px); border-radius: 2px; background: #ebedf0; }
.qi-crowd-gh i[data-v="1"] { background: #9be9a8; }
.qi-crowd-gh i[data-v="2"] { background: #40c463; }
.qi-crowd-gh i[data-v="3"] { background: #30a14e; }
.qi-crowd-gh i[data-v="4"] { background: #216e39; }

/* ----- the titles -----
   Small, and there are ten of them, so they read as a run of work rather than as a list. Each is pinned by
   its inner edge rather than its middle: centred, a long title grows both ways and slides under the card,
   and the right-hand column is cut on its left, so it loses the start of its own title. Pinned this way a
   title of any length grows outward and stays whole, and the numbers are staggered so the two columns
   never line up into a rule. */
.qi-crowd-pr {
  --y: 0px;
  --r: 0deg;
  --slide: 0px;
  position: absolute;
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d8dee4, 0 1px 2px rgb(31 35 40 / 0.1), 0 10px 20px -12px rgb(31 35 40 / 0.5);
  color: var(--merged);
  white-space: nowrap;
  translate: var(--slide) -50%;
  rotate: var(--r);
  scale: 0.9;
  opacity: 0;
  transition:
    translate 460ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease;
  transition-delay: calc(var(--i) * 45ms);
}
.qi-crowd-pr svg { width: 12px; height: 12px; flex-shrink: 0; }
.qi-crowd-pr em { font: 600 12px / 1.3 var(--font); font-style: normal; color: #1f2328; }
.c-quiet-index-crowdhero.is-prs .qi-crowd-pr { --slide: 0px; scale: 1; opacity: 1; }

/* Five down each side, each running about twenty pixels under her card so they read as coming out from
   behind it, and all of them inside the card's own 240px height so none sits below her instead. The
   left-hand column is built backwards on purpose: the card covers whichever end points at it, and
   reversing the row puts the merge mark there rather than the last letters of the title. */
.qi-crowd-pr:nth-child(-n+5) { --slide:  30px; flex-direction: row-reverse; }
.qi-crowd-pr:nth-child(n+6)  { --slide: -30px; }
.qi-crowd-pr:nth-child(1)  { right: 108px; --y: -102px; --r: -4deg; }
.qi-crowd-pr:nth-child(2)  { right: 100px; --y:  -51px; --r:  3deg; }
.qi-crowd-pr:nth-child(3)  { right: 120px; --y:    0px; --r: -2deg; }
.qi-crowd-pr:nth-child(4)  { right: 104px; --y:   51px; --r:  3deg; }
.qi-crowd-pr:nth-child(5)  { right: 114px; --y:  102px; --r: -3deg; }
.qi-crowd-pr:nth-child(6)  { left:  102px; --y:  -78px; --r:  3deg; }
.qi-crowd-pr:nth-child(7)  { left:  118px; --y:  -26px; --r: -3deg; }
.qi-crowd-pr:nth-child(8)  { left:  100px; --y:   26px; --r:  2deg; }
.qi-crowd-pr:nth-child(9)  { left:  112px; --y:   78px; --r: -3deg; }
.qi-crowd-pr:nth-child(10) { left:  104px; --y:  102px; --r:  3deg; }

/* ---------- where she has been ----------
   The marks on the same ring the messages use, each in a card of its own company's colour, cut the way
   the timeline cuts them: a rounded square with the corner at a quarter of its size, which is what
   .mf-logo does everywhere else on the site. Miro's file is the real one and already carries its yellow,
   so that card is the image edge to edge; the others sit on their colour with air around them. */
.qi-crowd-org {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  padding: 15px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--ink) 12%, transparent),
    0 18px 30px -14px color-mix(in srgb, var(--ink) 45%, transparent);
}
.qi-crowd-org svg,
.qi-crowd-org img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
/* A logo that comes with its own ground fills the card instead of sitting on one. */
.qi-crowd-org.is-cover { padding: 0; }
.qi-crowd-org.is-cover img { object-fit: cover; }
.qi-crowd-orgletter { font: 700 24px / 1 var(--font); }

/* Near the messages' four places. These are 78 across against her 240 card, so 160 is the nearest any
   of them can stand and still show whole, and none of them stands that near. */
.qi-crowd-org:nth-child(1) { --x: -172px; --y: -74px; --r: -6deg; }
.qi-crowd-org:nth-child(2) { --x:  176px; --y: -88px; --r:  5deg; }
.qi-crowd-org:nth-child(3) { --x: -168px; --y:  92px; --r:  4deg; }
.qi-crowd-org:nth-child(4) { --x:  174px; --y: 100px; --r: -5deg; }

/* The one layer that belongs over her rather than behind her, so it is the one that leaves the shared
   z-index. Its own 11 counts for nothing while its parent sits at 9: a positioned layer with a z-index
   is a stacking context, and nothing inside it can climb past the card from there. */

/* The bond between the pair: a hairline across the rim, longest when the two are side on and nothing
   at all when they pass each other, which happens twice a turn. */


/* The turn. Every pair runs the same animation and the walk gave each its own start, so the shape is
   in the delays and the motion only carries it round. */

/* Out along the normal as cos, towards you and away as sin, which here is brightness rather than depth. */
/* The same circle, half a turn along it. */
/* Standing still it is still a helix, because the shape is in the delays rather than in the motion. */
@media (prefers-reduced-motion: reduce) {
}


/* ---------- qi-crowd · the one playing it ----------
   The cursor the button hands the room to. It sits above everything, including her card, because it is
   the thing doing the pressing and a hand goes over what it reaches for. The travel is the whole
   performance: a long ease between seats so it reads as crossing the room rather than teleporting, and
   a press on arrival that is the same squash a real click gives. */
.qi-crowd-cur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  display: block;
  margin: -3px 0 0 -3px;
  color: var(--accent);
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition:
    translate var(--trip, 420ms) cubic-bezier(0.33, 0, 0.18, 1),
    opacity 260ms ease,
    scale 260ms ease;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--ink) 35%, transparent));
}
.qi-crowd-cur svg { display: block; }
.qi-crowd-cur.is-on { opacity: 1; scale: 1; }
.qi-crowd-cur.is-press { animation: qi-crowd-cursorpress 340ms cubic-bezier(0.3, 0, 0.2, 1); }
@keyframes qi-crowd-cursorpress {
  0%   { scale: 1; }
  28%  { scale: 0.72; }
  100% { scale: 1; }
}
/* With motion turned down the run is one step anyway, so the cursor has nowhere to travel. */
@media (prefers-reduced-motion: reduce) {
  .qi-crowd-cur { display: none; }
}

/* ----- the reactions -----
   Every one of them sets off from the same point inside her card, a little below its middle, which the
   card is painted over: the layer is behind her, so for the first half of its trip a reaction is simply
   not there, and what you see is it coming out from under her edge. From there it carries up and outward
   and tips as it goes, the way one of these does when somebody sends it in a call.

   The dwell at the origin is what keeps the air clear. Each cycle is nine seconds or so and a reaction
   waits behind her for the first fifty-five per cent of it, so with six of them on uneven negative delays
   there are two or three out at a time rather than all six at once. The travel itself still takes about
   four seconds. */
.qi-crowd-em {
  position: absolute;
  left: 0;
  top: 44px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  font-size: 38px;
  line-height: 1;
  opacity: 0;
  will-change: translate, opacity;
}
/* The same die cut the drawings have, and for the same reason it works on them: drop-shadow is computed
   from the alpha, so a stack of them in six directions traces the glyph's own outline rather than a box
   or a disc around it. They chain, each seeing the last one's result, which is what thickens four or
   five pixels of offset into one even rim. It is on the glyph rather than on the whole thing, so the
   coloured shine behind it keeps its soft edge instead of being cut out as well. */
.qi-crowd-em b {
  display: block;
  font-weight: inherit;
  filter:
    drop-shadow( 1.5px 0 0 #fff)
    drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0  1.5px 0 #fff)
    drop-shadow(0 -1.5px 0 #fff)
    drop-shadow( 1.1px  1.1px 0 #fff)
    drop-shadow(-1.1px -1.1px 0 #fff)
    drop-shadow(0 2px 3px rgb(0 0 0 / 0.22));
}
/* The shine. It is behind the emoji rather than around it, so there is no edge anywhere and nothing to
   read as a chip: a soft disc of that reaction's own colour, brightest at the moment it clears her edge
   and thinning out as it carries away. Its own animation rather than the parent's, so the peak lands on
   the emergence instead of on the middle of the trip. */
.qi-crowd-em::before {
  content: '';
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--glow) 62%, transparent) 0%,
    color-mix(in srgb, var(--glow) 28%, transparent) 38%,
    transparent 72%);
  opacity: 0;
}
.c-quiet-index-crowdhero.is-react .qi-crowd-em {
  animation: qi-crowd-float var(--dur) cubic-bezier(0.25, 0.55, 0.35, 1) infinite;
  animation-delay: var(--at);
}
.c-quiet-index-crowdhero.is-react .qi-crowd-em::before {
  animation: qi-crowd-shine var(--dur) cubic-bezier(0.25, 0.55, 0.35, 1) infinite;
  animation-delay: var(--at);
}
@keyframes qi-crowd-shine {
  0%,
  55%  { opacity: 0;    scale: 0.4; }
  68%  { opacity: 0.95; scale: 1; }
  100% { opacity: 0;    scale: 1.5; }
}

/* ----- the card answers -----
   While the reactions are coming she beats: two thumps and a rest, the second smaller than the first,
   which is the shape of a heartbeat rather than a pulse. It animates the scale property on its own
   rather than going inside the transform shorthand, because the card's foil tilt owns transform and the
   two have to compose instead of overwrite. */
.c-quiet-index-crowdhero.is-react .qi-crowd-card {
  animation: qi-crowd-beat 1.9s ease-in-out infinite;
}
@keyframes qi-crowd-beat {
  0%, 46%, 100% { scale: 1; }
  8%            { scale: 1.035; }
  18%           { scale: 1; }
  27%           { scale: 1.019; }
}

@keyframes qi-crowd-float {
  0%,
  55%  { translate: 0 0;                          rotate: 0deg;                 scale: 0.3;  opacity: 0; }
  68%  { translate: calc(var(--x) * 0.3) -62px;   rotate: calc(var(--r) * 0.3); scale: 1;    opacity: 1; }
  88%  {                                                                                     opacity: 1; }
  100% { translate: var(--x) -300px;              rotate: var(--r);             scale: 1.06; opacity: 0; }
}

/* On a short window there is no room above her for a card this tall, so the squares and the offset both
   come down rather than the top of it running off the screen. */
@media (max-height: 780px) {
  .qi-crowd-chart { --sq: 10px; --y: -215px; }
}
@media (max-height: 680px) {
  .qi-crowd-chart { --sq: 9px; --y: -190px; }
}
/* The messages ring is about 616px across. Below that there is nowhere for either to go, so they stay in. */
@media (max-width: 700px) {
  .qi-crowd-proof,
  .qi-crowd-prs,
  .qi-crowd-merged,
  .qi-crowd-react { display: none; }
}


/* On its way out early: a pill whose project the reader has left fades where it is rather than finishing
   a rise nobody is reading it for. The animation is dropped so the fade is the only thing left moving. */
.qi-react-pill.is-gone { animation: none; opacity: 0; transition: opacity 320ms linear; }

/* The column stands at the right edge, clear of the dock, and reaches the top of the window so a pill has
   somewhere to rise to. It sits under the dock pills (20, 21) and far under the overlays (70, 90): this is
   furniture, and none of it may ever come between a reader and something they meant to press. */
/* 44vw left the column 171px wide on a phone, which is about thirty characters once the face and the
   padding are out — so the quote was cut twice over and its own ellipsis was clipped off by the clamp.
   78vw is close to the 320px it gets on a desktop. */
.qi-react { position: fixed; z-index: 18; top: 0; right: 16px; bottom: calc(var(--dock-space, 96px) + 16px); width: min(320px, 78vw); pointer-events: none; }

/* A pill is one line of somebody else's words, so it is built like the other small furniture here: the
   raised ground, the hairline, the label role. It starts at the foot of the column and rises out of the
   top of it, fading in quickly and out slowly, with a drift of its own so two of them never travel as a
   pair. Seven seconds is long enough to read at a glance and short enough that the corner is usually empty. */
/* A reaction is somebody saying something, so it is shaped like somebody saying something: a name, then
   two or three lines of what they said, in a bubble with one corner squared off where it would have a
   tail. It was a single nowrap line ending in an ellipsis, which read as a ticker and was not worth
   stopping for (her word, 23 Oct). The clamp is what keeps a long testimonial from becoming a wall;
   resting on it lifts the clamp and shows the whole quote. */
/* Set like a notification rather than a card: one even corner, a hairline instead of a border, the
   ground behind it blurred rather than painted over, and a single soft fall under it. Quieter on every
   count, which is what she asked the whole page to be. */
.qi-react-pill { position: absolute; right: 0; bottom: 0; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px 13px; border: 0.5px solid rgb(0 0 0 / 0.07); border-radius: 18px; background: color-mix(in oklch, var(--raised) 76%, transparent); backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); box-shadow: 0 0.5px 1px rgb(0 0 0 / 0.04), 0 12px 32px -10px rgb(0 0 0 / 0.18); color: var(--body); font: var(--l2-font); opacity: 0; pointer-events: auto; animation: qi-react-rise 7s linear forwards; }
.qi-react-dot { flex: none; margin-top: 5px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.qi-react-body { display: block; min-width: 0; }
.qi-react-who { display: block; font-weight: 600; letter-spacing: -0.005em; }
.qi-react-line { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  max-height: 4.1em; color: var(--muted); transition: max-height 420ms var(--ease-out); }
:root[data-motion="reduced"] .qi-react-line { transition: none; }
/* The face sits where the dot sat. Colour rather than the grayscale the rest of the site puts portraits
   in, because this one is somebody talking to you rather than a figure in a case. */
.qi-react-face { flex: none; width: 27px; height: 27px; margin-top: 2px; overflow: hidden; border-radius: 50%; background: var(--fill-2) no-repeat; }
/* No photograph of them, so their initials, set the way the rest of the site sets an absent face. */
.qi-react-mono { display: grid; place-items: center; color: var(--muted); font: var(--l3-font); font-weight: 600; letter-spacing: 0.02em; }
.qi-react-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; user-select: none; }
.qi-react-emo { position: absolute; right: 20px; bottom: calc(100% - 6px); translate: var(--ex, 0) 0; font-size: 15px; line-height: 1; opacity: 0; pointer-events: none; animation: qi-react-pop 2.6s var(--d, 0ms) ease-out forwards; }

@keyframes qi-react-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.5); }
  18% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-48px) scale(1); }
}
/* On a narrow screen a message is nearly the full width of the window, and a thing that takes the pointer
   there is a thing standing between a reader and whatever they meant to press underneath it. The hold was
   never going to work on a touch screen anyway, so below 700px the message lets everything through and is
   purely something to look at. */
@media (max-width: 700px) {
  .qi-react-pill { pointer-events: none; }
}

/* Held open, the clamp goes and the bubble takes whatever room the whole quote needs. */
/* Resting on one gives you the rest of what they said. It grows in height and never in width, at her
   word (26 Oct): the column has one width and a message that widened under the pointer shoved the page
   about. The clamp lets go and the height eases open behind it. */
.qi-react-pill.is-open .qi-react-line { -webkit-line-clamp: 24; max-height: 22em; }
/* is-open no longer opens anything: it only marks the one the pointer is resting on, which is what
   pauses its rise. The line keeps its three and its size. */

@keyframes qi-react-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.96); }
  10% { opacity: 1; transform: translate3d(calc(var(--drift, 0px) * 0.2), -8vh, 0) scale(1); }
  70% { opacity: 1; transform: translate3d(var(--drift, 0px), -42vh, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift, 0px) * 1.3), -60vh, 0) scale(1); }
}


/* ----- the foot of the page: what she is next -----
   The same 5 x 7 bitmap and the same morph as the concept, on one line and out to the window's edges, so
   the last thing anybody sees is as wide as the first. */
.qi-spell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  margin-inline: calc(50% - 50vw);
  /* The band is a screenful (80vh, her word 21 Oct) and its content sits at the foot of it: the air belongs
     above the word, not between the word and the line of small print under it, which she asked to sit right
     beneath (22 Oct). Centred, that air fell below the buttons and pushed the copyright 254px away. */
  justify-content: flex-end;
  min-height: 80vh;
  /* The bar at the foot of the page is fixed and stays on all the way down, so the band gives back the
     room it takes. Without this the word she is spelled out of ran under it. */
  padding-bottom: 92px;
  overflow: hidden;
  margin-top: clamp(80px, 16vh, 160px);
  /* The copyright line sits right under this — 8px under it, at her word (22 Oct) — so the band gives back
     the page's own footer padding as well as the dock's. */
  margin-bottom: calc(0px - var(--dock-space) - 52px);
  /* The phrase is as large as the window allows, so the window is what it gets: the page's own gutter costs
     two letters at this pitch, and this band carries nothing else that needs to line up with the column. */
  padding-inline: clamp(8px, 1.4vw, 20px);
  text-align: center;
  /* whatever the window can give each of the phrase's columns, capped so it is never a billboard */
  /* Larger, at her word (22 Oct): the cap was 26px, which left the phrase small in the middle of a band
     that now has a screenful to itself. */
  /* Larger still (22 Oct): sized from 54 columns rather than from the longest phrase, so that anything up
     to that stands whole. With the words stacked one to a line (23 Oct) the widest thing that has to fit
     is a single word, 41 cells at most, so the 54 never binds and nothing runs off the edges any more.
     The second term is the band: the word is two rows of letters now, so a cell that fits the window
     across can still be too tall for the 80vh this sits in, and 62vh leaves the air above it and the
     line of small print below it the room they already had. */
  /* Sized from the real column count, not from at most 54 of them. On today's phrases the two are the
     same number, 41, so nothing moves; the cap mattered only for a word of ten letters or more, which is
     59 cells and would have run off the edges exactly the way a whole phrase on one line did. */
  /* The square the letters are built from. The drawing on each one is bigger than its square, so the
     word is wider than the grid that measures it — the gutter has to carry that spill as well, or the
     last letter runs off the side, which is what was happening to the R of CHARMER at a tablet width.
     The gutter is a share of the square rather than a fixed figure, so it holds at every size. */
  --cell: clamp(6px, min(calc((100vw - 2 * clamp(14px, 4vw, 30px)) / var(--cols)), calc(62vh / (var(--rows) + 1))), 48px);
}
.qi-spell { --bleed: -0.38; }
/* On a touch device the bar does not take the copyright over, so the line under the word is printed -
   and the band was pulling it 56px up, straight across the last row of letters (her word, 27 Oct: it
   breaks on narrow screens). The pull exists to trim the air the band leaves when nothing is printed
   under it; where something IS printed, the band simply stops where the word stops, and the line's own
   8px of padding puts it right beneath, which is where she asked for it. The room for the fixed bar is
   then the printed line's own bottom padding rather than the band's. */
@media (hover: none), (pointer: coarse) {
  .c-anatomy-lpage[data-list="approach"] .qi-spell { padding-bottom: 0; margin-bottom: 0; }
}
/* Below a tablet the squares are small enough that the spill has to come in, or the letters close up. */
/* And the spill itself comes down with the square. At a tablet width the drawings were overlapping by
   a fifth of a square each way, which closed the counters of the letters and made the word a texture
   rather than a word. */
@media (max-width: 900px) { .qi-spell { --bleed: -0.1; } }
@media (max-width: 620px) { .qi-spell { --bleed: -0.05; } }
.qi-spell-word {
  position: relative;
  display: block;
  width: calc(var(--cols) * var(--cell));
  height: calc((var(--rows) + 1) * var(--cell));
  cursor: pointer;
}
.qi-spell-cell {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cell);
  height: var(--cell);
  translate: calc(var(--x) * var(--cell)) calc(var(--y) * var(--cell));
  will-change: opacity, scale;
}
/* She is drawn bigger than the cell she sits in, so neighbours overlap and the letter reads as a crowd
   rather than a row of dots. The cell keeps the pitch; only what is drawn in it spills. */
.qi-spell-cell::before {
  content: "";
  position: absolute;
  /* Each drawing is bigger than the square it stands on, so the crowd reads as a crowd rather than as a
     grid. How much bigger has to come down with the square: a letter is five squares across, and at the
     nine pixels a phone gives them a drawing spilling 38% of a square in every direction covers its
     neighbours in the next letter — the word turns to mush, which is what she was seeing. --bleed is
     that overlap, and the narrow screens below take it down. */
  inset: calc(var(--cell) * var(--bleed, -0.38));
  background-image: var(--art);
  background-size: cover;
  background-position: 50% 26%;
  border-radius: 22%;
}
/* The two ways to reach her, in the same button the hero card uses — same pill, same weight, same ink at
   the same strength — so the page opens and closes on one shape (22 Oct). No icon on the copy one: the
   button says what it is, and a glyph beside two words is a third thing to read. */
.qi-spell-reach .mf-copy-icon { display: none; }
.qi-spell-reach { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-bottom: 0; font: var(--b3-font); }
/* The bar at the foot of the page is fixed, and now that it stays on all the way down it was sitting on
   top of these two — the last two things on the page, and the two somebody who read this far came for.
   The room it takes is given back here so they clear it. */
/* The room for the bar is on the band itself now: this row steps aside once the bar carries her
   address and her CV, and padding on a hidden element holds nothing off. */
.qi-spell-reach :is(a, .mf-copy) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 6%, transparent);
  color: color-mix(in oklch, var(--ink) 70%, transparent);
  font: 500 var(--t-13) / 1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out);
}
.qi-spell-reach :is(a, .mf-copy):hover {
  background: color-mix(in oklch, var(--ink) 11%, transparent);
  color: var(--ink);
}



/* anatomy */

/* ---------- Anatomy · the table ---------- */
.c-anatomy { position: relative; height: 100%; overflow: clip; background: color-mix(in oklch, var(--line) 16%, var(--paper)); -webkit-user-select: none; user-select: none; }
.c-anatomy-stage { position: absolute; inset: 0; overflow: clip; touch-action: none; overscroll-behavior: none; cursor: grab; }
.c-anatomy-stage.is-grabbing, .c-anatomy-stage.is-grabbing * { cursor: grabbing; }
.c-anatomy-plane { position: absolute; inset: 0; overflow: clip; transition: opacity 420ms var(--ease-out); }
/* inside a case the table stays exactly where it was around the grown card, dimmed and still */
.c-anatomy-plane.is-main.is-case { pointer-events: none; }
.c-anatomy-plane.is-main.is-case .c-anatomy-front > * { pointer-events: auto; }
/* while a case is open the rest of the table steps back, gently and only part of the way, so you always see where you are */
/* the back layer: everything on the table, stepping back as one composited opacity when a page or a case is about
   something else; the front layer holds what is being looked at */
.c-anatomy-back, .c-anatomy-front { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.c-anatomy-back { z-index: 1; will-change: opacity; transition: opacity 420ms var(--ease-out); }
.c-anatomy-front { z-index: 2; }
.c-anatomy-world:is([data-at="approach"], [data-at="thoughts"]) > .c-anatomy-back:not([data-layer="approach"], [data-layer="thoughts"]),
.c-anatomy-world[data-at="approach"] > .c-anatomy-back[data-layer="thoughts"],
.c-anatomy-world[data-at="thoughts"] > .c-anatomy-back[data-layer="approach"] { opacity: var(--an-back); }
.c-anatomy-world > :is(.c-anatomy-ink, .c-anatomy-peers) { transition: opacity 420ms var(--ease-out); }
.c-anatomy-world.is-dimmed > :is(.c-anatomy-back, .c-anatomy-ink, .c-anatomy-peers) { opacity: var(--an-case-back); transition: opacity 620ms var(--ease-in-out); }
/* reading a case, everything that is not the case goes quiet, over the glide in; it comes back up the same way */
.c-anatomy-world.is-dimmed.is-reading > :is(.c-anatomy-back, .c-anatomy-ink, .c-anatomy-peers) { opacity: var(--an-read-back); transition: opacity 600ms var(--ease-in-out); }
/* the cutouts stay faintly there, to keep your place; the table's own labels do not. At the back layer's opacity
   their big type still reads through the header pill, which sits right on top of them. */
.c-anatomy-world.is-dimmed :is(.c-anatomy-sect, .c-anatomy-axis) { opacity: 0; }
/* its words are there at once, each rising in on its own; closing, they fade while the card folds back */
.c-anatomy-dots { position: absolute; left: 0; top: 0; width: calc(100% + 80px); height: calc(100% + 80px); transform-origin: 0 0; will-change: transform; background-image: radial-gradient(circle, var(--line-2) 0.62px, transparent 1px); background-size: 22px 22px; }
.c-anatomy-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* a moving layer only while the camera changes scale, so the compositor scales it as it is; let go when it settles, so
   its type is drawn sharp again once. The pieces of a case are their own layers only while they travel. */
.c-anatomy-world.is-flying { will-change: transform; }
.c-anatomy-front.is-seq > .c-anatomy-cut { will-change: transform; }
.c-anatomy-front.is-seq .c-anatomy-fancard { will-change: transform, opacity; }
.c-anatomy-cut.is-piece.is-waiting { visibility: hidden; }
/* the camera is moved frame by frame: never tweened, even when reduced motion shortens every transition */
.c-anatomy-world, .c-anatomy-dots { transition-property: none; }

/* cutouts: media is the shell's frame itself; everything else is paper */
.c-anatomy-item { position: absolute; left: 0; top: 0; z-index: 2; transition: opacity 400ms var(--ease-out), scale var(--d-state) var(--ease-out), translate var(--d-state) var(--ease-out); }
.c-anatomy-cut { border-radius: 8px; cursor: grab; }
.c-anatomy-cut.is-media { border-radius: calc(var(--r-l) + 4px); }
.c-anatomy-cut::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent), 0 22px 44px -12px color-mix(in oklch, var(--ink) 30%, transparent); opacity: 0; transition: opacity 220ms var(--ease-out); }
.c-anatomy-cut.is-lifted::before { opacity: 1; }
.c-anatomy-cut.is-lifted { cursor: grabbing; }
.c-anatomy-cut:active { scale: 1; }
.c-anatomy-cut:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.c-anatomy-cut > :is(.mf-work, .mf-media) { width: 100%; height: 100%; }
.c-anatomy-cut.is-soon > .mf-media { border-style: dashed; border-color: var(--line-2); }
.c-anatomy-paper { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: inherit; background: var(--raised); }

.c-anatomy-cut.is-slip .c-anatomy-paper { padding: 16px 18px; }
.c-anatomy-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; font: var(--b3-font); color: var(--ink); text-wrap: pretty; }
.c-anatomy-cut.is-sheet .c-anatomy-paper { gap: 10px; padding: 22px 18px 16px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.c-anatomy-cut.is-sheet .c-anatomy-paper::after { content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--fill); }
.c-anatomy-etitle { font: var(--b2-font); font-weight: 600; color: var(--ink); text-wrap: balance; }
.c-anatomy-ex { font: var(--l2-font); color: var(--body); }

/* case folders: a small tab over a cover that fills the folder face */
.c-anatomy-cut.is-folder::before { top: 31px; border-radius: 0 8px 8px 8px; }
.c-anatomy-cut.is-folder .c-anatomy-paper { border: 0; background: none; overflow: visible; }
.c-anatomy-tab { position: relative; z-index: 1; display: flex; align-self: flex-start; align-items: baseline; gap: 8px; max-width: 92%; margin-bottom: -1px; padding: 8px 14px 7px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--raised); line-height: 1.2; white-space: nowrap; }
.c-anatomy-tab b { overflow: hidden; text-overflow: ellipsis; font: var(--b3-font); font-weight: 600; color: var(--ink); }
.c-anatomy-tab span, .c-anatomy-folder-cap i { font: var(--l3-font); letter-spacing: var(--l3-track); font-style: normal; color: var(--muted); }
.c-anatomy-folder { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 10px; border: 1px solid var(--line); border-radius: 0 8px 8px 8px; background: var(--raised); }
.c-anatomy-folder-photo { position: relative; flex: 1; min-height: 0; }
.c-anatomy-folder-photo > :is(.mf-work, .mf-media) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.c-anatomy-folder-cap { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px 2px; font: var(--l2-font); color: var(--body); }
.c-anatomy-cut.is-folder.is-soon :is(.c-anatomy-tab, .c-anatomy-folder) { border-style: dashed; border-color: var(--line-2); }
/* an era's card: the folder and the role in one. The tab says who and when, then the cover, then the role */
.c-anatomy-cut.is-era::before { top: 42px; }
.c-anatomy-cut.is-era .c-anatomy-tab { gap: 10px; padding: 10px 16px 9px; }
.c-anatomy-cut.is-era .c-anatomy-tab b { font: var(--h3-font); letter-spacing: var(--h3-track); }
.c-anatomy-cut.is-era .c-anatomy-tab span { font: var(--l3-font); letter-spacing: var(--l3-track); }
.c-anatomy-cut.is-era .c-anatomy-folder { gap: 12px; padding: 12px; }
.c-anatomy-cut.is-era .c-anatomy-folder-cap { padding: 0 4px 4px; font: var(--b3-font); color: var(--body); }
.c-anatomy-cut.is-era.is-bare .c-anatomy-folder { justify-content: center; padding: 16px 18px; }
/* a card with a case study says so quietly on hover: a pointer, a 2px lift and a soft shadow, nothing else.
   Architecture's card has no case, so it has neither. */
.c-anatomy-cut.is-era { cursor: default; }
.c-anatomy-cut.is-era.is-openable { cursor: pointer; transition: opacity 400ms var(--ease-out), scale var(--d-state) var(--ease-out), translate 180ms var(--ease-out); }
/* the fan: the case's next two pictures wait exactly behind the cover, and on hover or focus peek out past its edges */
.c-anatomy-folder-photo > :is(.mf-work, .mf-media) { z-index: 1; transition: scale 240ms var(--ease-drawer), translate 240ms var(--ease-drawer); }
.c-anatomy-fan { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.c-anatomy-fancard { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-l); background: var(--fill); opacity: 0; box-shadow: none; transition: opacity 240ms var(--ease-drawer), translate 240ms var(--ease-drawer), rotate 240ms var(--ease-drawer), box-shadow 240ms var(--ease-drawer); }
.c-anatomy-fancard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) :is(.c-anatomy-fancard, .c-anatomy-folder-photo > .mf-work),
.c-anatomy-pvcard :is(.c-anatomy-fancard, .c-anatomy-folder-photo > .mf-work) { transition: opacity 380ms var(--ease-drawer), translate 380ms var(--ease-drawer), rotate 380ms var(--ease-drawer), scale 380ms var(--ease-drawer), box-shadow 380ms var(--ease-drawer); }
.c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) .c-anatomy-folder-photo > .mf-work,
.c-anatomy-pvcard .c-anatomy-folder-photo > .mf-work { scale: 1.02; translate: 0 -2px; }
.c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) .c-anatomy-fancard,
.c-anatomy-pvcard .c-anatomy-fancard { opacity: 1; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent), 0 14px 28px -12px color-mix(in oklch, var(--ink) 30%, transparent); }
.c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) .c-anatomy-fancard.is-a,
.c-anatomy-pvcard .c-anatomy-fancard.is-a { translate: -5% -4%; rotate: -6deg; }
.c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) .c-anatomy-fancard.is-b,
.c-anatomy-pvcard .c-anatomy-fancard.is-b { translate: 5% 3%; rotate: 5deg; transition-delay: 40ms; }
:root[data-motion="reduced"] .c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) .c-anatomy-fancard.is-a { translate: -2% -2%; rotate: -2deg; }
:root[data-motion="reduced"] .c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.has-fan:not(.is-lifted):is(:hover, :focus-visible) .c-anatomy-fancard.is-b { translate: 2% 2%; rotate: 2deg; }
/* the list's preview is the era card itself, picked up: its hover shadow on, and its fan opening as it appears */
/* the index's own cursor preview stands aside inside Anatomy: its rows show the era card beside the list instead */
.c-anatomy .c-quiet-index-pv { display: none; }
/* One measure for the whole site. Her hero used to read at 58ch inside a 46rem page, so her opening words were
   indented a hundred pixels from the timeline under them and her Approach page was a third of the width again.
   Everything is the one column now — hero, timeline, stories, Approach — at a width between the two she had,
   so nothing shifts its left edge as you move down the page or between pages. The collage of kind words is the
   one thing that breaks out of it, because it is a board rather than a column. */
.c-anatomy-lpage > .c-quiet-index { max-width: calc(var(--measure) + 2 * var(--pad)); }
/* a case in the list sits under Work, with its projects in the header: the index's own way back to Cases is not needed */
.c-anatomy-lpage[data-list="case"] .c-quiet-index-back { display: none; }
/* the list's preview: the same era card, cover playing, standing just above the row you are on and gliding from row
   to row; it rises in from the row */
.c-anatomy-lpv { position: fixed; left: 0; top: 0; z-index: 24; width: 400px; pointer-events: none; opacity: 0; transform-origin: 0 0; will-change: transform; transition: opacity 200ms var(--ease-out), transform 360ms var(--ease-drawer); }
.c-anatomy-lpv.is-on { opacity: 1; }
.c-anatomy-lpv.is-instant { transition: opacity 180ms var(--ease-out); }
.c-anatomy[data-view="canvas"] .c-anatomy-lpv { display: none; }
@media (hover: none), (pointer: coarse) { .c-anatomy-lpv { display: none; } }
.c-anatomy-pvcard { position: relative; cursor: default; }
.c-anatomy-pvcard .c-anatomy-fancard { animation: c-anatomy-fan 380ms var(--ease-drawer) 60ms both; }
.c-anatomy-pvcard .c-anatomy-fancard.is-b { animation-delay: 100ms; }
@keyframes c-anatomy-fan { from { opacity: 0; translate: 0 0; rotate: 0deg; box-shadow: none; } }
.c-anatomy-pvcard::after, .c-anatomy-cut.is-era.is-openable::after { content: ""; position: absolute; inset: 42px 0 0; border-radius: 0 8px 8px 8px; pointer-events: none; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent), 0 14px 30px -14px color-mix(in oklch, var(--ink) 22%, transparent); opacity: 0; transition: opacity 180ms var(--ease-out); }
.c-anatomy-pvcard::after { opacity: 1; }

/* the time axis: a thin line, a dot and the era where each one starts, the year it began where it ends */
.c-anatomy-axis { position: absolute; z-index: 1; height: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; transition: opacity 400ms var(--ease-out); }
.c-anatomy-axline { position: absolute; left: 0; top: -1px; height: 2px; border-radius: 1px; background: var(--line-2); }
.c-anatomy-era { position: absolute; top: 0; width: max-content; padding-top: 24px; }
.c-anatomy-era::after { content: ""; position: absolute; left: -0.5px; top: 8px; width: 1px; height: 16px; background: var(--line-2); }
/* an era's header: a small card hanging from its dot, the org in weight and role and years under it */
.c-anatomy-era::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.c-anatomy-era.is-soon::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px var(--paper); }
.c-anatomy-year { position: absolute; top: 0; width: 0; height: 0; }
.c-anatomy-year::before { content: ""; position: absolute; left: -1px; top: -8px; width: 2px; height: 16px; border-radius: 1px; background: var(--line-2); }
.c-anatomy-year span { position: absolute; bottom: 18px; left: 0; translate: -50% 0; font: var(--l3-font); letter-spacing: var(--l3-track); color: var(--muted); white-space: nowrap; }
.c-anatomy { --an-back: 0.16; --an-case-back: 0.38; --an-read-back: 0.1; }

/* an outcome on the timeline: the number large, what it measures under it */

/* a page is a place on the one table: what it is not about steps back and goes quiet, but stays where it is */
.c-anatomy-item.is-dim { pointer-events: none; }
.c-anatomy-stk { transition: opacity 400ms var(--ease-out); }
.c-anatomy-stk.is-dim { pointer-events: none; }
.c-anatomy-item.is-out { opacity: 0; scale: 0.92; pointer-events: none; }

/* the hover card: small raised paper on the object's nearest free edge, a short fade and a 4px rise */
.c-anatomy-hc { position: absolute; left: 0; top: 0; z-index: 12; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: max-content; max-width: 280px; padding: 12px 15px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); box-shadow: 0 1px 2px oklch(0.2 0.02 265 / 0.05), 0 12px 28px -14px oklch(0.2 0.02 265 / 0.3); opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity 140ms var(--ease-out), translate 140ms var(--ease-out); }
.c-anatomy-hc.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.c-anatomy-hc > .c-anatomy-klabel { margin-bottom: 4px; }
.c-anatomy-hc-t { font: var(--b3-font); font-weight: 600; color: var(--ink); text-wrap: pretty; }
.c-anatomy-hc-l { font: var(--l2-font); color: var(--muted); text-wrap: pretty; }
.c-anatomy-hc-q { margin-top: 8px; font: var(--l2-font); color: var(--body); text-wrap: pretty; }
.c-anatomy[data-view="list"] .c-anatomy-hc { display: none; }
.c-anatomy-go { align-self: flex-start; margin-top: 10px; font: var(--l1-font); padding: 5px 11px; border-radius: 999px; background: var(--ink); color: var(--raised); font-weight: 500; text-decoration: none; transition: background-color 150ms var(--ease-out), scale var(--d-press) var(--ease-out); }

/* ---------- Anatomy · a case, as the table's own pieces ---------- */
/* The era card stays itself and lifts above the table; out of it come the table's components: paper cards for the
   summary and each section, number cards, framed media, and the kind words as slips and screenshots. */
.c-anatomy-cut.is-grown { translate: none !important; cursor: default; }
.c-anatomy-cut.is-grown::before, .c-anatomy-cut.is-grown::after { opacity: 0 !important; }
.c-anatomy-cut.is-grown .c-anatomy-fancard { transition: none !important; translate: none !important; rotate: none !important; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent), 0 14px 28px -12px color-mix(in oklch, var(--ink) 30%, transparent); }
.c-anatomy-cut.is-grown .c-anatomy-folder-photo > .mf-work { scale: none !important; translate: none !important; }
/* its pieces are picked up and moved like the table's own cutouts; a title written on the table casts no paper shadow */
.c-anatomy-cut.is-piece { cursor: grab; }
.c-anatomy-cut.is-piece.is-lifted { cursor: grabbing; }
.c-anatomy-cut.is-ptitle::before { display: none; }
/* the era's own kind word on the table steps out while its case is open: the case holds it among the rest */
.c-anatomy-plane.is-case .c-anatomy-cut.is-tucked { opacity: 0 !important; pointer-events: none; }
.c-anatomy-cut.is-num .c-anatomy-paper { justify-content: center; gap: 6px; padding: 16px 18px; }
.c-anatomy-cut.is-num b { font: var(--h2-font); letter-spacing: var(--h2-track); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.c-anatomy-cut.is-num .c-anatomy-paper > span { font: var(--l2-font); color: var(--muted); }
.c-anatomy-cut.is-psum .c-anatomy-paper { gap: 14px; padding: 24px 26px 26px; }
.c-anatomy-pt { margin: 0; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); outline: none; }
.c-anatomy-plead { margin: 0; font: var(--b2-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-cut.is-psec .c-anatomy-paper { gap: 12px; padding: 24px 26px 26px; font: var(--b3-font); color: var(--body); }
.c-anatomy-cut.is-psec p { margin: 0; text-wrap: pretty; }
.c-anatomy-cut.is-pdisc .c-anatomy-paper { padding: 18px 22px; }
.c-anatomy-cut.is-pnext .c-anatomy-paper { justify-content: center; padding: 20px 22px; }
.c-anatomy-cut.is-note.is-whole .c-anatomy-q { display: block; overflow: visible; -webkit-line-clamp: unset; }
.c-anatomy-small { margin: 0; font: var(--l2-font); color: var(--muted); }
.c-anatomy-next { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.c-anatomy-next > span { font: var(--l2-font); color: var(--muted); }
.c-anatomy-next b { font: var(--h3-font); letter-spacing: var(--h3-track); font-weight: 600; }
.c-anatomy-next b > span { display: inline-block; transition: translate var(--d-state) var(--ease-out); }
.c-anatomy-paper h3 { margin: 0; font: var(--h3-font); letter-spacing: var(--h3-track); font-weight: 600; color: var(--ink); }
.c-anatomy-paper ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.1em; color: var(--ink); }
/* a case in the list: an article in one reading column, type and pictures and space, nothing boxed */
.c-anatomy-art { width: min(620px, 100% - 40px); margin: 0 auto; padding: 116px 0 200px; font: var(--b2-font); color: var(--body); }
.c-anatomy-art > *, .c-anatomy-art p, .c-anatomy-art h2 { margin: 0; }
.c-anatomy-art :is(p, li) { max-width: 32em; text-wrap: pretty; }
.c-anatomy-art .c-anatomy-art-meta { max-width: none; font: var(--l2-font); color: var(--muted); }
.c-anatomy-art-t { margin-top: 14px !important; font: var(--h1-font); letter-spacing: var(--h1-track); color: var(--ink); text-wrap: balance; outline: none; }
.c-anatomy-art-lede { margin-top: 22px !important; font: var(--b1-font); color: var(--ink); }
.c-anatomy-art-m { margin: 44px 0 0; }
.c-anatomy-art-m.is-cover { margin-top: 40px; }
.c-anatomy-art-m > :is(.mf-work, .mf-media) { border-radius: 16px; }
.c-anatomy-art-m figcaption { margin-top: 10px; font: var(--l2-font); color: var(--muted); }
.c-anatomy-art-nums { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 40px 0 0; padding: 0; list-style: none; }
.c-anatomy-art-nums li { display: flex; flex-direction: column; gap: 4px; max-width: none; }
.c-anatomy-art-nums b { font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); font-variant-numeric: tabular-nums; }
.c-anatomy-art-nums li > span { max-width: 20ch; font: var(--l2-font); color: var(--muted); }
.c-anatomy-art-sec { display: flex; flex-direction: column; gap: 18px; margin-top: 64px; }
.c-anatomy-art-sec h2 { font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); }
.c-anatomy-art-sec ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 1.2em; color: var(--body); }
.c-anatomy-art-quote { margin-top: 56px; padding-left: 22px; border-left: 2px solid var(--line-2); }
.c-anatomy-art-quote .mf-quote blockquote p { font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); max-width: 30em; }
.c-anatomy-art-shot { margin: 32px 0 0; }
.c-anatomy-art-shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.c-anatomy-art-shot.is-kudos { width: min(260px, 100%); }
.c-anatomy-art-small { font: var(--l2-font); color: var(--muted); }
/* her live case layout: one column, a real title, pictures with their small print, cards for what people said */
.c-anatomy-lc { width: min(620px, 100% - 40px); padding-top: 0; }
.c-anatomy-lc :is(p, li) { max-width: none; }
.c-anatomy-lc strong { font-weight: 600; color: var(--ink); }
.c-anatomy-lc :is(p, li) a, .c-anatomy-cut.is-psec a { color: var(--ink); background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color var(--d-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .c-anatomy-lc :is(p, li) a:hover, .c-anatomy-cut.is-psec a:hover { text-decoration-color: var(--ink); } }
/* the page is tied to its own scroll: every block fades and rises as you reach it, and goes back the same way when
   you read up again. The scroll drives it, so nothing plays on its own; the sections and the two pieces that tell
   themselves are left out: the praise deck, the two columns of the condensed case (their own rows are tied
   instead), and the design points once the story has taken their words and clips out of their block. The cover is
   left out too — it is already there when the page opens — and the hero is tied line by line instead of as one
   block, so after a full-screen cover its name, its line and its figures arrive in the order you read them. */
@supports (animation-timeline: view()) {
  :root[data-motion="full"] .c-anatomy-lpage[data-list="case"] :is(.c-anatomy-lc > :not(.c-anatomy-lc-head, .c-anatomy-lc-sec, .c-anatomy-lc-said, .c-anatomy-lc-deepbar, .c-anatomy-lcx-grid, .c-anatomy-lccover, .c-anatomy-lchero), .c-anatomy-lchero > *, .c-anatomy-lc-sec > :not(.c-anatomy-lc-hl, .c-anatomy-lc-cmp, .c-anatomy-lc-story), .c-anatomy-lc-saidt > h2, .c-anatomy-lc-saidm > :not(.c-anatomy-lc-deck), .c-anatomy-lc-said > .c-anatomy-lc-site, .c-anatomy-lc-hl > :is(.c-anatomy-lc-hlt, .c-anatomy-lc-hlm), .c-anatomy-lc-cmpr, .c-anatomy-lc-cards > li) {
    animation: c-anatomy-tie linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  @keyframes c-anatomy-tie { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
}
/* the bold lead of a paragraph is swept with light as it reaches the reading line; what is already on screen when
   the page opens is simply marked */
.c-anatomy-lc-mk { background: linear-gradient(color-mix(in oklch, var(--accent) 16%, transparent), color-mix(in oklch, var(--accent) 13%, transparent)) no-repeat 0 50% / 0% 1.15em; border-radius: 3px; }
.c-anatomy-lc-mk.is-on { background-size: 100% 1.15em; transition: background-size 700ms var(--ease-out) 80ms; }
.c-anatomy-lc-mk.is-now { transition: none; }
:root[data-motion="reduced"] .c-anatomy-lc-mk { background-size: 100% 1.15em; transition: none; }
/* the header scrolls away with the page: the mark, the title and its years on one line, the years as plain words */
.c-anatomy-lc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 112px 0 18px; }
/* reading a deep dive, the line above the title says so and goes back to the case; the header above it keeps
   Work > the project lit, so there are two ways back and neither of them shouts */
.c-anatomy-lc-deepbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 !important; padding: 104px 0 0; font: var(--l2-font); color: var(--muted); }
.c-anatomy-lc-deepbar a { display: inline-flex; align-items: center; gap: 6px; position: relative; color: var(--muted); text-decoration: none; transition: color var(--d-state) var(--ease-out); }
.c-anatomy-lc-deepbar a > svg { flex: none; }
.c-anatomy-lc-deepbar > span { padding-left: 10px; border-left: 1px solid var(--line); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .c-anatomy-lc-deepbar a:hover { color: var(--ink); } }
.c-anatomy-lc-deepbar + .c-anatomy-lc-head { padding-top: 14px; }
/* the quiet way in, at the end of a case: small, plain, and only there once she has asked for it */
.c-anatomy-lc-deeplink { display: flex; width: fit-content; align-items: center; gap: 8px; position: relative; margin-top: 56px; font: var(--l2-font); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color var(--d-state) var(--ease-out), text-decoration-color var(--d-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .c-anatomy-lc-deeplink:hover { color: var(--ink); text-decoration-color: var(--ink); } }
/* in a deep dive there is nothing to switch to: the views step out of the header for as long as you are there */
.c-anatomy[data-deep] :is(.c-anatomy-views, .c-anatomy-idsep) { display: none; }
.c-anatomy-lc .c-anatomy-art-t { margin: 0 !important; font: var(--h1-font); letter-spacing: var(--h1-track); }
.c-anatomy-lc-years { font: var(--b3-font); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the cover straight under the title, then the subtitle and intro */
.c-anatomy-lc > .c-anatomy-lc-m.is-cover { margin: 8px 0 44px; }
.c-anatomy-lc-sub { margin: 0 0 16px !important; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); }
.c-anatomy-lc > p + p { margin-top: 14px; }
.c-anatomy-lc-m { margin: 32px 0 0; }
.c-anatomy-lc-m > :is(.mf-work, .mf-media) { border-radius: 12px; }
.c-anatomy-lc-m.is-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-anatomy-lc-m.is-grid > figcaption { grid-column: 1 / -1; }
.c-anatomy-lc-m figcaption { margin-top: 8px; font: var(--l2-font); color: var(--muted); }
.c-anatomy-lc-sec { display: flex; flex-direction: column; gap: 14px; margin-top: 64px; }
.c-anatomy-lc-sec > .c-anatomy-lc-m { margin-top: 18px; }
.c-anatomy-lc-sec h2 { margin-bottom: 4px !important; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); }
.c-anatomy-lc-sec ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.2em; }
.c-anatomy-lc-said { display: flex; flex-direction: column; gap: 28px; margin-top: 80px; }
.c-anatomy-lc-said > h2 { margin-bottom: 4px !important; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
.c-anatomy-lc-card { position: relative; margin: 0 0 0 16px; padding: 26px 28px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.c-anatomy-lc-mark { position: absolute; left: -16px; top: -16px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--fill); font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); padding-top: 9px; }
.c-anatomy-lc-card blockquote { margin: 0; }
.c-anatomy-lc-card blockquote p { font: var(--b2-font); color: var(--ink); }
.c-anatomy-lc-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: var(--l2-font); }
.c-anatomy-lc-card figcaption .mf-quote-face { width: 32px; height: 32px; }
.c-anatomy-lc-card figcaption > span:last-child { display: flex; flex-direction: column; }
.c-anatomy-lc-card figcaption b { font: var(--l1-font); font-weight: 600; color: var(--ink); }
.c-anatomy-lc-card figcaption b + span { color: var(--muted); }
.c-anatomy-lc-site { display: block; margin-left: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--fill); text-align: center; font: var(--l1-font); font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color var(--d-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .c-anatomy-lc-site:hover { text-decoration-color: var(--ink); } }
/* before -> after: two columns and an arrow, no rules or boxes; the old state quieter than the new */
.c-anatomy-lc-cmp { display: flex; flex-direction: column; gap: 18px; margin: 10px 0 4px; }
.c-anatomy-lc-cmph, .c-anatomy-lc-cmpr { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 0; }
.c-anatomy-lc-cmph { font: var(--l3-font); letter-spacing: var(--l3-track); font-weight: 500; color: var(--muted); }
.c-anatomy-lc-cmpr p { margin: 0; font: var(--b3-font); }
.c-anatomy-lc-cmpr .is-from { color: var(--muted); }
.c-anatomy-lc-cmpr .is-from strong { color: var(--body); font-weight: 600; }
.c-anatomy-lc-cmpr .is-to { color: var(--body); }
.c-anatomy-lc-arrow { justify-self: center; color: var(--accent); font: var(--b3-font); }
/* and the row resolves as you read it: the arrow draws, the new state settles in, the old one steps back. Tied to
   the scroll, so reading back up puts it the way it was. */
@supports (animation-timeline: view()) {
  :root[data-motion="full"] .c-anatomy-lc-cmpr .is-to { animation: c-anatomy-bato linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
  :root[data-motion="full"] .c-anatomy-lc-cmpr .c-anatomy-lc-arrow { animation: c-anatomy-badraw linear both; animation-timeline: view(); animation-range: cover 12% cover 30%; }
  :root[data-motion="full"] .c-anatomy-lc-cmpr .is-from { animation: c-anatomy-bafrom linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
  @keyframes c-anatomy-bato { from { opacity: 0.18; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes c-anatomy-badraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes c-anatomy-bafrom { from { color: var(--ink); } to { color: var(--muted); } }
}
@media (max-width: 599.98px) {
  .c-anatomy-lc-cmph, .c-anatomy-lc-arrow { display: none; }
  .c-anatomy-lc-cmpr { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .c-anatomy-lc-cmpr .is-to::before { content: "→  " / ""; color: var(--accent); }
}
.c-anatomy-pcmp { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 12px 8px; align-items: baseline; margin: 6px 0; }
.c-anatomy-pcmp p { margin: 0; }
.c-anatomy-pcmp .is-from { color: var(--muted); }
.c-anatomy-pcmp > span { justify-self: center; color: var(--accent); }
/* a design highlight: two columns wider than the reading column, the words beside the clip; stacked on a phone */
.c-anatomy-lc-hl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 40px; align-items: start; width: min(980px, 100vw - 48px); margin: 40px 0 8px 50%; translate: -50% 0; }
.c-anatomy-lc-hlt { display: flex; flex-direction: column; gap: 10px; }
.c-anatomy-lc-hlt h3 { margin: 0; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); text-wrap: balance; }
.c-anatomy-lc-hlt p { margin: 0; font: var(--b2-font); }
.c-anatomy-lc-hlt ul { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding-left: 1.1em; font: var(--b2-font); }
.c-anatomy-lc-hlt p.c-anatomy-lc-note { font: var(--l2-font); }
.c-anatomy-lc-hlm { margin: 0; }
.c-anatomy-lc-hlm > :is(.mf-work, .mf-media) { border-radius: 12px; }
@media (max-width: 759.98px) {
  .c-anatomy-lc-hl { grid-template-columns: minmax(0, 1fr); width: auto; margin-left: 0; translate: none; }
}
/* with room for it, the words stay on the reading column's left edge and the clip reaches out into the right margin */
@media (min-width: 1180px) {
  .c-anatomy-lc-hl { grid-template-columns: 380px minmax(0, 1fr); gap: 20px 48px; width: min(900px, 50vw + 310px - 48px); margin-left: 0; translate: none; }
}
/* with that room the points become one story: the words scroll on the left, their clip holds still on the right and
   changes with them, and the point you are reading is the one lit. Narrower, the points stay stacked as they were. */
.c-anatomy-lc-hl.is-moved { display: none; }
.c-anatomy-lc-story { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0 48px; width: min(900px, 50vw + 310px - 48px); margin: 40px 0 0; }
.c-anatomy-lc-storyw { display: flex; flex-direction: column; }
.c-anatomy-lc-storyw .c-anatomy-lc-hlt { min-height: 62vh; padding-top: 12vh; opacity: 0.3; transition: opacity 420ms var(--ease-out); }
.c-anatomy-lc-storyw .c-anatomy-lc-hlt:first-child { padding-top: 0; }
.c-anatomy-lc-storyw .c-anatomy-lc-hlt:last-child { min-height: 40vh; }
.c-anatomy-lc-storyw .c-anatomy-lc-hlt.is-on { opacity: 1; }
.c-anatomy-lc-storys { position: relative; }
.c-anatomy-lc-storyf { position: sticky; top: 22vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.c-anatomy-lc-storyf .c-anatomy-lc-hlm { grid-area: 1 / 1; opacity: 0; scale: 0.985; transition: opacity 360ms var(--ease-out), scale 520ms var(--ease-out); }
.c-anatomy-lc-storyf .c-anatomy-lc-hlm.is-on { opacity: 1; scale: 1; }
.c-anatomy-lc-storyf .mf-media-label { max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
/* ---------- the condensed case: her words on one left edge, the screens scrolling past on the right ----------
   The right column is the point, so it gets the extra width: the block starts on the same left edge as every other
   page and reaches further into the right margin than the design points do. One row per beat: the text that leads
   up to a screen, and that screen. Below 1000px the same rows simply read down the page in today's type, each beat
   then its screens. */
/* The figures a case is read by: each one a figure with its label under it, several across, wrapping rather than
   squeezing. One figure simply sits on its own at the left — nothing is stretched to fill the row — so an era with
   one reads the same as an era with three. The collapsed timeline row shows this very component. */
.c-anatomy-lcx-impact { display: flex; flex-wrap: wrap; gap: 14px 40px; max-width: 70ch; margin: 26px 0 4px; font: var(--l2-font); color: var(--muted); }
.c-anatomy-lcx-impact span { display: grid; align-content: start; gap: 2px; max-width: 24ch; text-wrap: pretty; }
.c-anatomy-lcx-impact b { font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) { .c-anatomy-lcx-impact { gap: 12px 28px; } }
.c-anatomy-lcx-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: clamp(30px, 6vh, 64px); }
.c-anatomy-lcx-text, .c-anatomy-lcx-shots { display: contents; }
.c-anatomy-lcx-beat { grid-column: 1; grid-row: calc(var(--row) * 2 - 1); min-width: 0; margin-top: 64px; }
.c-anatomy-lcx-beat[data-n="0"] { margin-top: 0; }
.c-anatomy-lcx-shot { grid-column: 1; grid-row: calc(var(--row) * 2); min-width: 0; margin-top: 18px; }
.c-anatomy-lcx-shot.is-empty { display: none; }
.c-anatomy-lcx-beatin { display: flex; flex-direction: column; gap: 8px; }
.c-anatomy-lcx-t { margin: 0; color: var(--ink); text-wrap: balance; }
/* Nothing inside a story is bigger than the name of the place it happened. The row's own head — the company,
   at h3 — is the largest thing in that era, and the story under it steps down from there: a section at the body
   size, a design point one below it, both carrying their weight rather than their size. Sections used to be set
   at h2, which made a heading inside the fold larger than the company it belonged to. */
.c-anatomy-lcx-t.is-l2 { font: var(--b1-font); font-weight: 600; letter-spacing: var(--h3-track); }
.c-anatomy-lcx-t.is-l3 { font: var(--b2-font); font-weight: 600; }
.c-anatomy-lcx-lead + .c-anatomy-lcx-t, .c-anatomy-lcx-t.is-l2 + .c-anatomy-lcx-t.is-l3 { margin-top: 14px; }
.c-anatomy-lcx-beat p { margin: 0; font: var(--b2-font); max-width: none; }
.c-anatomy-lcx-lead { color: var(--body); }
/* whatever frame the asset already had, at the full width of its column */
.c-anatomy-lcx-shot > figure { margin: 0 !important; }
.c-anatomy-lcx-shot > figure + figure { margin-top: 18px !important; }
.c-anatomy-lcx-shot > figure > :is(.mf-work, .mf-media) { border-radius: 14px; }
.c-anatomy-lcx-shot .c-anatomy-lc-cards { margin: 0; }
/* ---------- the same case, folded out on Home ----------
   On the timeline a case opens in place, under the era's own picture, so there is no second column to put the
   screens in: her words and the screens stack down one column at her reading measure, the way her live case pages
   read. The words are set with the very classes the spine uses; only the layout is one column, and nothing in it
   is ever wider than the row it opened in. Its beats and screens carry their own class names rather than the
   spine's, because the spine's are tied to the scroll — and inside a drawer that clips its own overflow there is
   nothing honest for a view() timeline to measure. The fold has its own arrival instead, in Home's own CSS. */
.c-anatomy-lci { width: min(620px, 100%); padding: 0; font: var(--b2-font); color: var(--body); }
.c-anatomy-lci-open { display: flex; flex-direction: column; }
.c-anatomy-lci > .c-anatomy-lci-open > .c-anatomy-lc-sub { margin: 0 0 12px !important; font: var(--h3-font); letter-spacing: var(--h3-track); }
.c-anatomy-lci-open > .c-anatomy-lcx-lead { margin: 0; font: var(--b2-font); }
/* what came of it, right under her first sentence: a row of figures, each one over the words it belongs to, so
   three numbers read as three numbers rather than one long line that wraps where it likes */
.c-anatomy-lci-open > .c-anatomy-lcx-impact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 16px 24px;
  justify-content: start;
  max-width: none;
  margin: 24px 0 0;
}
.c-anatomy-lci-open > .c-anatomy-lcx-impact span { display: flex; flex-direction: column; gap: 1px; white-space: normal; font: var(--l2-font); }
.c-anatomy-lci-open > .c-anatomy-lcx-impact b { font: var(--h3-font); letter-spacing: var(--h3-track); }
/* The rhythm of the story. A stage is one step: the words, then the screen they lead to, close under them. A
   stage that opens a new section of the case starts a chapter — more room above it and a hairline to say so —
   while the design points inside a section stay a short step apart, so six of them read as one run and not as
   six pages. */
.c-anatomy-lci-stage { margin-top: 30px; }
/* a new section of a case is said by the room around it, not by a rule across it */
.c-anatomy-lci-stage[data-l="2"] { margin-top: 88px; padding-top: 0; }
.c-anatomy-lci-beat { display: flex; flex-direction: column; gap: 8px; }
.c-anatomy-lci-beat p { margin: 0; font: var(--b2-font); max-width: none; }
/* One typeface, so a heading cannot be told from a bold lead by its face: it is told by its size. A section and
   a design point keep the two steps the case page gives them, a size apart from the words under them, and it is
   the hairline above a section, not its type, that says a new chapter has started. */
/* The fold sets its own headings, and this is where the story's scale is decided: nothing in it is bigger than
   the name of the company the row belongs to, which is h3. A section takes the body size and a design point the
   one below it, both carrying their weight rather than their size. */
.c-anatomy-lci-beat .c-anatomy-lcx-t.is-l2 { font: var(--b1-font); font-weight: 600; letter-spacing: var(--h3-track); }
.c-anatomy-lci-beat .c-anatomy-lcx-t.is-l3 { font: var(--b2-font); font-weight: 600; }
/* ---------- her stickers, down the margins of a case ----------
   The layer breaks out of the reading column to the width of the window, because that is where the air is: the
   column is 41rem in the middle of it and the stickers live either side. It takes no pointer except on the
   stickers themselves, so nothing it does can get between a reader and the story.
   At rest the only one there is the hub. The rest are laid out where they will land before they are ever shown,
   so the throw has somewhere to throw them to and nothing is measured mid-flight. */
.c-anatomy-lci { position: relative; }
.c-anatomy-sticky {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: min(1340px, 96vw);
  height: 100%;
  translate: -50% 0;
  pointer-events: none;
}
.c-anatomy-sticky-hub {
  position: absolute;
  right: 0;
  top: -6px;
  display: block;
  width: clamp(76px, 9vw, 112px);
  padding: 0;
  border: 0;
  background: none;
  rotate: 4deg;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 6px 14px color-mix(in oklch, var(--ink) 20%, transparent));
  transition: scale 260ms var(--spring), rotate 260ms var(--spring);
}
.c-anatomy-sticky-hub img { display: block; width: 100%; height: auto; }
.c-anatomy-sticky-hub:active { scale: 0.94; }
.c-anatomy-sticky-hub:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
/* pressed, she is the one who sent them out: a little smaller and turned the other way, so the button plainly
   has two states without anything being written on it */
.c-anatomy-sticky[data-stk].is-out .c-anatomy-sticky-hub { scale: 0.86; rotate: -5deg; }
.c-anatomy-sticky-one {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: clamp(72px, 8.5vw, 108px);
  rotate: var(--tilt, 0deg);
  opacity: 0;
  visibility: hidden;
  /* it comes up from a little below its claim, which is the direction the reading is coming from */
  translate: 0 18px;
  cursor: pointer;
  pointer-events: none;
  filter: drop-shadow(0 5px 12px color-mix(in oklch, var(--ink) 18%, transparent));
  transition: opacity 360ms var(--ease-out), translate 560ms var(--spring), scale 260ms var(--spring), visibility 0s linear 360ms;
}
.c-anatomy-sticky-one img { display: block; width: 100%; height: auto; }
.c-anatomy-sticky .c-anatomy-sticky-one.is-in { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
.c-anatomy-sticky .c-anatomy-sticky-one.is-in:is(:hover, :focus-visible) { scale: 1.08; }
.c-anatomy-sticky-one:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
/* while one is being rested on, the others step back too: there is one sticker and one part of the story */
.c-anatomy-sticky-one.is-quiet { opacity: 0.35; }
@media (hover: hover) and (pointer: fine) {
  .c-anatomy-sticky-hub:hover { scale: 1.06; rotate: 1deg; }
}
/* what a sticker is about: the rest of the page takes its ink out, and nothing moves */
.c-anatomy-lap .c-anatomy-apstory > * { transition: opacity 260ms var(--ease-out); }
.c-anatomy-lap.is-dim .c-anatomy-apstory > * { opacity: 0.16; }
.c-anatomy-lap.is-dim .c-anatomy-apclaim.is-lit { opacity: 1; }
/* and the layer stands against the page rather than against a case fold. The hub clears the floating nav,
   which a case fold is already well below by the time it starts. */
.c-anatomy-lap { position: relative; }
.c-anatomy-lap .c-anatomy-sticky { height: auto; inset: 0 auto auto 50%; bottom: 0; }
/* The hub clears the floating nav and the window's right edge. The layer starts at the very top of the page,
   which is under the nav and inside the mask that fades the page's first hundred pixels, so the hub has to be
   put below both — and held in from the edge, or her shoulder is cut off by the window. */
.c-anatomy-lap .c-anatomy-sticky { padding-inline: clamp(10px, 2vw, 34px); box-sizing: border-box; }
.c-anatomy-lap .c-anatomy-sticky-hub { right: clamp(10px, 3vw, 52px); top: calc(var(--navspace, 72px) + 16px); }
/* no margin to stand in: the stickers stay in, and the hub with them. A sticker beside a phone's one column
   would be on top of the words, which is the one thing they are there not to do. */
@media (max-width: 1099.98px) {
  .c-anatomy-stk { display: none; }
}
:root[data-motion="reduced"] .c-anatomy-sticky-one { translate: none; transition: opacity 140ms var(--ease-out), visibility 0s linear 140ms; }

.c-anatomy-lci-shot { margin-top: 14px; }
.c-anatomy-lci-shot > figure { margin: 0 !important; }
.c-anatomy-lci-shot > figure + figure { margin-top: 14px !important; }
.c-anatomy-lci-shot > figure > :is(.mf-work, .mf-media) { border-radius: 12px; }
.c-anatomy-lci-shot .c-anatomy-lc-cards { margin: 0; }
/* A testimonial written as a message from the person who said it, for Home's collage: their face and name, then
   their words, in the smaller reading size the collage sets them in beside the saved screenshots. */
/* A testimonial set as a message rather than as a card, so the ones she typed out sit in the same family as the
   ones she screenshotted. What makes a message read as a message is the furniture, not a frame: a round face at
   the head of it, the name and who they are on ONE line — the way a thread labels a sender — and the words
   under that, flush with the name rather than indented. So the border goes (a screenshot has none either; the
   collage's own shadow is what lifts it off the paper), the face grows to the size a thread gives one, and the
   two halves of the header stop stacking. Still no product's marks, colours or chrome, no reactions and no
   timestamps: these came off her own site, not out of anyone's inbox, and the shape is all they borrow. */
.c-anatomy-msg {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: var(--raised);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--line) 70%, transparent),
    0 1px 2px color-mix(in oklch, var(--ink) 5%, transparent);
}
.c-anatomy-msg figcaption { display: contents; }
.c-anatomy-msg .mf-quote-face { grid-column: 1; grid-row: 1; flex: none; width: 44px; height: 44px; }
/* the sender line: their name, then who they are, on one line and wrapping onto the next only when it must */
.c-anatomy-msg figcaption > span:last-child {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  min-width: 0;
  align-self: center;
  line-height: 1.3;
}
.c-anatomy-msg figcaption b { font: var(--l1-font); font-weight: 600; color: var(--ink); }
.c-anatomy-msg figcaption b + span { font: var(--l2-font); color: var(--muted); }
/* The words run the whole width under the sender line rather than indenting past the face. A thread can afford
   that indent because a thread is wide; these stand 290 units across in the collage, where giving a quarter of
   the line to the face left four words to a line. The sender line keeps the shape — face, name, who they are —
   and the message starts under it. */
.c-anatomy-msg blockquote { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; }
.c-anatomy-msg blockquote p { font: var(--b3-font); color: var(--ink); text-wrap: pretty; }

/* the way out to the company's own page, where the kind words used to close the fold */
.c-anatomy-lci-site { width: min(420px, 100%); margin: clamp(48px, 7vh, 72px) 0 0; }
/* the way out to the case's own address, in the small type every other aside on a case is in */
.c-anatomy-lci-page { display: flex; width: fit-content; align-items: baseline; gap: 8px; margin-top: clamp(32px, 5vh, 48px); font: var(--l2-font); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color var(--d-state) var(--ease-out), text-decoration-color var(--d-state) var(--ease-out); }
@media (hover: hover) { .c-anatomy-lci-page:hover { color: var(--ink); text-decoration-color: var(--ink); } }
/* ---------- the picture a case opens on ----------
   One screen, filled: the cover edge to edge and top to bottom, with nothing written over it. Its height is the
   dynamic viewport, which is what the stage under it is too (position: fixed, inset 0), so on a phone the picture
   is exactly the screen whether the browser's own chrome is showing or has slid away — 100vh would leave the last
   strip of it under the chrome. The picture covers its frame, so it is cropped rather than squeezed, and it keeps
   the pause and scrub controls every clip in a case has. The width trick is the one the cover already used on
   narrow screens: 100vw from the middle, which the page clips sideways. */
.c-anatomy-lccover { width: 100vw; height: 100vh; height: 100dvh; margin: 0 0 0 50%; translate: -50% 0; }
.c-anatomy-lccover > .mf-work { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: var(--fill); }
.c-anatomy-lccover > .mf-work > :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
/* the page's own fade under the header pill would lay a band of paper across the top of that picture, so a page
   that opens on one does without it; the pills carry their own ground, and the words below start a screen away */
.c-anatomy-lpage[data-cover] { -webkit-mask-image: none; mask-image: none; }
/* Nor a page that opens with the crowd. The fade was there so nothing passed behind the pill at full ink;
   the pill is glass now, so what passes behind it is meant to be seen, and a transparent band across the top
   of a room full of her read as a fill laid over it. */
.c-anatomy-lpage:has(.c-quiet-index-crowdhero) { -webkit-mask-image: none; mask-image: none; }

/* ---------- the hero a case opens with ----------
   Its name and years, the line under them and the paragraph it starts with, all centred on a comfortable measure.
   After a full-screen cover it is what you scroll to: the same reading motion as every other block brings it up.
   Everything below it keeps her left reading edge. */
.c-anatomy-lchero { text-align: center; }
/* a case that opens on its cover: the words begin a comfortable step under it, not a title's worth of padding */
.c-anatomy-lccover + .c-anatomy-lchero .c-anatomy-lc-head { padding-top: clamp(56px, 14vh, 128px); }
.c-anatomy-lccover + .c-anatomy-lchero .c-anatomy-lc-note { max-width: 58ch; margin: 36px auto 0 !important; font: var(--l2-font); color: var(--muted); text-align: center; }
.c-anatomy-lchero .c-anatomy-lc-head { justify-content: center; padding-bottom: 14px; }
.c-anatomy-lchero .c-anatomy-lc-sub { max-width: 28ch !important; margin-inline: auto !important; }
.c-anatomy-lchero > p { max-width: 64ch; margin: 18px auto 0; font: var(--b2-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-lchero > .c-anatomy-lc-m { margin: clamp(28px, 5vh, 48px) 0 0; }
.c-anatomy-lchero > .c-anatomy-lc-m figcaption { text-align: center; }
/* the cover reaches past the reading column, to the width the two columns below it use */
@media (min-width: 1000px) { .c-anatomy-lchero .c-anatomy-lc-sub { max-width: 34ch !important; } }
@media (max-width: 999.98px) {
  .c-anatomy-lchero > .c-anatomy-lc-m { width: 100vw; margin-left: 50%; translate: -50% 0; }
  .c-anatomy-lchero > .c-anatomy-lc-m > :is(.mf-work, .mf-media) { border-radius: 0; }
}

/* what follows the two columns keeps her one reading edge */
.c-anatomy-lc.is-spine > :is(.c-anatomy-lc-said, .c-anatomy-art-next, .c-anatomy-lc-deeplink) { width: min(620px, 100%); }
/* ---------- what people there say, in the same two columns as the case ----------
   Its two halves are wrappers that are nothing at all until there is room for columns: at rest both are
   display: contents, so the section is the one column it has always been, in the same order. */
.c-anatomy-lc-saidt > h2 { font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
.c-anatomy-lc-saidt, .c-anatomy-lc-saidm { display: contents; }
@media (min-width: 1000px) {
  .c-anatomy-lc.is-spine { width: min(1040px, 100% - 80px); margin-inline: auto; }
  /* the section takes the full width of the case and splits it the way every beat above it is split: what it is
     called on the left, riding along beside the words and the messages themselves on the right */
  .c-anatomy-lc.is-spine > .c-anatomy-lc-said {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 44px;
    width: 100%;
  }
  .c-anatomy-lc.is-spine .c-anatomy-lc-saidt { display: block; grid-column: 1; grid-row: 1; position: sticky; top: 22vh; align-self: start; }
  .c-anatomy-lc.is-spine .c-anatomy-lc-saidm { display: flex; flex-direction: column; gap: clamp(28px, 5vh, 48px); grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .c-anatomy-lc.is-spine .c-anatomy-lc-saidt > h2 { margin-bottom: 0 !important; }
  .c-anatomy-lc.is-spine > .c-anatomy-lc-said > .c-anatomy-lc-site { grid-column: 1; grid-row: 2; margin: 0; align-self: end; }
  .c-anatomy-lc.is-spine .c-anatomy-lc-card { margin-left: 0; }
  /* the deck is a stage that holds still while you scroll past it; in the right column it is that column wide */
  .c-anatomy-lc.is-spine .c-anatomy-lc-deck.is-stage { width: 100%; }
  .c-anatomy-lc.is-spine > .c-anatomy-lc-sub { max-width: 30ch; }
  .c-anatomy-lcx-grid { grid-template-columns: 380px minmax(0, 1fr); column-gap: 44px; }
  .c-anatomy-lcx-text { display: flex; flex-direction: column; gap: clamp(30px, 6vh, 58px); grid-column: 1; grid-row: 1; }
  .c-anatomy-lcx-shots { display: flex; flex-direction: column; gap: clamp(44px, 9vh, 104px); grid-column: 2; grid-row: 1; }
  .c-anatomy-lcx-beat, .c-anatomy-lcx-shot { margin: 0; }
  /* held: the beat you are on stays still while its screens pass, and the next one takes over as you arrive.
     readingIn adds is-held, so without JavaScript both columns simply scroll and every beat is readable. */
  .c-anatomy-lcx-text.is-held { position: sticky; top: 22vh; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .c-anatomy-lcx-text.is-held .c-anatomy-lcx-beat { grid-area: 1 / 1; opacity: 0; transition: opacity 360ms var(--ease-out); }
  .c-anatomy-lcx-text.is-held .c-anatomy-lcx-beat.is-on { opacity: 1; }
  /* a beat with no screen of its own still gets its moment */
  .c-anatomy-lcx-text.is-held ~ .c-anatomy-lcx-shots .c-anatomy-lcx-shot.is-empty { display: block; min-height: 42vh; }
}
/* the screens are tied to the scroll like every other block; the beats only while they are in the flow */
@supports (animation-timeline: view()) {
  :root[data-motion="full"] .c-anatomy-lcx-shot { animation: c-anatomy-tie linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  @media (max-width: 999.98px) {
    :root[data-motion="full"] .c-anatomy-lcx-beat { animation: c-anatomy-tie linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
.c-anatomy-cut.is-psec h4 { margin: 14px 0 -4px; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
/* the outcome's metric cards: soft fields, no outlines, the figure large */
.c-anatomy-lc-res { margin-top: 18px; }
.c-anatomy-lc-cards { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.c-anatomy-lc-cards li { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 14px; background: var(--fill); }
.c-anatomy-lc-cards b { font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); font-variant-numeric: tabular-nums; }
.c-anatomy-lc-cl { font: var(--l1-font); font-weight: 500; color: var(--ink); }
.c-anatomy-lc-cs { font: var(--l2-font); color: var(--muted); }

/* ---------- a brand study, as a bento box ----------
   Three tiles on a six-column grid: the type decision across the whole width, because a line of display type
   needs it, then colour and simplicity side by side under it. The colour tile is inverted — ink where the
   others are paper — because the study's own rule is that inversion is a scene change, and the tile about
   colour is the one that gets to say so. Below 620px the box is one column, in the same order. */
.c-anatomy-bd { margin: 0; }
.c-anatomy-bd-box { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* A tile is three things and nothing else: which decision it is, the thing that shows it, and the decision. The
   reasoning waits underneath and comes up over the tile when the tile is rested on or tabbed to — which is what
   keeps the box a set of objects rather than a wall of type. Nothing reflows when it opens: the panel is laid
   over the tile, not inserted into it, so the grid never moves. */
.c-anatomy-bd-tile {
  position: relative;
  grid-column: span 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 236px;
  padding: 16px 16px 18px;
  border-radius: 16px;
  background: var(--raised);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 1px 2px color-mix(in oklch, var(--ink) 5%, transparent);
  transition: box-shadow 260ms var(--ease-out), translate 300ms var(--spring);
}
.c-anatomy-bd-tile.is-wide { grid-column: span 6; }
.c-anatomy-bd-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.c-anatomy-bd-k { font: var(--l3-font); letter-spacing: var(--l3-track); text-transform: uppercase; color: var(--faint); }
.c-anatomy-bd-tile h5 { margin: 0; align-self: end; font: var(--l1-font); font-weight: 600; color: var(--ink); text-wrap: pretty; }
/* the reasoning, held just under the foot of the tile until it is wanted */
.c-anatomy-bd-why {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 44px 16px 18px;
  font: var(--l2-font);
  color: var(--body);
  text-wrap: pretty;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--raised) 34%, var(--raised));
  transition: opacity 240ms var(--ease-out), translate 340ms var(--ease-drawer);
}
.c-anatomy-bd-tile:is(:hover, :focus-visible, :focus-within) { translate: 0 -2px; box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 4px color-mix(in oklch, var(--ink) 6%, transparent), 0 18px 36px -22px color-mix(in oklch, var(--ink) 30%, transparent); }
.c-anatomy-bd-tile:is(:hover, :focus-visible, :focus-within) .c-anatomy-bd-why { opacity: 1; translate: 0 0; }
/* the scene change: the one tile that is ink, which is the rule it is about */
.c-anatomy-bd-tile.is-ink {
  background: var(--island);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 12%, transparent), 0 16px 34px -22px color-mix(in oklch, var(--ink) 40%, transparent);
}
.c-anatomy-bd-tile.is-ink .c-anatomy-bd-k { color: var(--island-muted); }
.c-anatomy-bd-tile.is-ink h5 { color: var(--island-ink); }
.c-anatomy-bd-tile.is-ink .c-anatomy-bd-why { color: var(--island-muted); background: linear-gradient(to bottom, transparent, var(--island) 34%, var(--island)); }
.c-anatomy-bd-tile.is-ink .c-anatomy-bd-demo { background: color-mix(in oklch, var(--island-ink) 7%, transparent); }
.c-anatomy-bd-tile.is-ink:is(:hover, :focus-visible, :focus-within) { box-shadow: 0 2px 4px color-mix(in oklch, var(--ink) 14%, transparent), 0 20px 40px -22px color-mix(in oklch, var(--ink) 46%, transparent); }
/* a tile's own demonstration, on the paper the tile sits on */
.c-anatomy-bd-demo { display: grid; align-content: center; gap: 6px; padding: 16px; border-radius: 10px; background: var(--paper); }
/* the framing system, said in three steps rather than described: a hairline, a surface, and one lifted off it */
.c-anatomy-bd-demo.is-surf { grid-auto-flow: column; align-content: stretch; align-items: stretch; gap: 10px; padding: 18px 16px; }
.c-anatomy-bd-demo.is-surf > span { display: block; border-radius: 10px; }
.c-anatomy-bd-demo.is-surf > .is-line { box-shadow: inset 0 0 0 1px var(--line-2); }
.c-anatomy-bd-demo.is-surf > .is-fill { background: var(--fill); }
.c-anatomy-bd-demo.is-surf > .is-lift { background: var(--raised); box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 7%, transparent), 0 10px 20px -10px color-mix(in oklch, var(--ink) 28%, transparent); }
/* the two faces the study is about, and the only place on this site they are used */
.c-anatomy-bd-word { margin: 0; font: var(--h2-font); font-family: "Apris", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.c-anatomy-bd-sub { margin: 0; font: var(--l2-font); font-family: "Inter Var", var(--font); font-weight: 200; font-variation-settings: "wght" 200; color: var(--muted); }
/* the ink ramp, then the one interruption, set apart so it reads as punctuation rather than a ninth step */
.c-anatomy-bd-ramp { display: flex; align-items: stretch; gap: 3px; margin: 0; padding: 0; list-style: none; }
.c-anatomy-bd-ramp li {
  position: relative;
  flex: 1 1 0;
  height: 46px;
  min-width: 0;
  border-radius: 5px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 8%, transparent);
}
.c-anatomy-bd-ramp li.is-accent { flex: 0 0 22%; margin-left: 10px; }
/* resting on a step names it: the ramp is a component, not a picture */
.c-anatomy-bd-ramp li > span {
  position: absolute;
  inset: auto 50% calc(100% + 7px) auto;
  translate: 50% 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: var(--l3-font);
  letter-spacing: var(--l3-track);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--ease-out);
}
.c-anatomy-bd-ramp li:hover > span { opacity: 1; }
/* the before and the after she filmed, when a tile has them */
.c-anatomy-bd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 3px; }
.c-anatomy-bd-shot { display: grid; gap: 5px; margin: 0; }
.c-anatomy-bd-shot > :is(.mf-work, .mf-media) { border-radius: 10px; }
.c-anatomy-bd-tag { font: var(--l3-font); letter-spacing: var(--l3-track); text-transform: uppercase; color: var(--faint); }
.c-anatomy-bd-shot:last-child .c-anatomy-bd-tag { color: var(--accent); }
.c-anatomy-bd > figcaption { margin-top: 10px; font: var(--l2-font); color: var(--muted); text-wrap: pretty; }
@container (max-width: 620px) {
  .c-anatomy-bd-tile, .c-anatomy-bd-tile.is-wide { grid-column: span 6; }
}
@media (max-width: 719.98px) {
  .c-anatomy-bd-tile, .c-anatomy-bd-tile.is-wide { grid-column: span 6; }
  .c-anatomy-bd-pair { grid-template-columns: minmax(0, 1fr); }
  .c-anatomy-bd-ramp li { height: 38px; }
}
/* nothing to rest on: the reasoning simply sits under the decision, and the tile is as tall as it needs to be */
@media (hover: none) {
  .c-anatomy-bd-tile { grid-template-rows: auto 1fr auto auto; min-height: 0; }
  .c-anatomy-bd-why { position: static; padding: 0; opacity: 1; translate: none; background: none; }
}
:root[data-motion="reduced"] .c-anatomy-bd-tile { transition: box-shadow 160ms var(--ease-out); translate: none; }
:root[data-motion="reduced"] .c-anatomy-bd-why { translate: none; transition: opacity 140ms var(--ease-out); }

/* the praise: a deck you go through by scrolling. Plainly it is a column of messages, one under the next; with room
   and motion it becomes a stage that holds still while you scroll past, dealing the front message away to the left. */
.c-anatomy-lc-deck { display: flex; flex-direction: column; }
.c-anatomy-lc-deckl { display: flex; flex-direction: column; gap: 12px; }
.c-anatomy-lc-slide { display: grid; place-items: center; margin: 0; padding: 20px; border-radius: 14px; background: var(--fill); }
.c-anatomy-lc-slide img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.c-anatomy-lc-slide.is-kudos img { max-width: min(260px, 100%); }
.c-anatomy-lc-deckn { display: none; margin: 0; font: var(--l2-font); color: var(--muted); font-variant-numeric: tabular-nums; }
.c-anatomy-lc-deckn b { font-weight: 500; color: var(--ink); }
/* the stage: about a screen of it, and a little over half a screen of scroll for every message after the first */
.c-anatomy-lc-deck.is-stage { height: calc(90vh + (var(--n) - 1) * 55vh); }
.c-anatomy-lc-deck.is-stage .c-anatomy-lc-decks { position: sticky; top: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; height: 90vh; padding: 4vh 0; }
.c-anatomy-lc-deck.is-stage .c-anatomy-lc-deckl { display: grid; grid-template-areas: "card"; place-items: center start; gap: 0; min-height: 0; }
.c-anatomy-lc-deck.is-stage .c-anatomy-lc-slide { grid-area: card; place-items: center; width: min(560px, 100%); max-height: 100%; padding: 0; border-radius: 0; background: none; }
.c-anatomy-lc-deck.is-stage .c-anatomy-lc-slide img { max-width: 100%; max-height: min(46vh, 100%); width: auto; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 10%, transparent), 0 18px 40px -16px color-mix(in oklch, var(--ink) 30%, transparent); }
.c-anatomy-lc-deck.is-stage .c-anatomy-lc-slide.is-kudos img { max-width: min(300px, 100%); }
.c-anatomy-lc-deck.is-stage .c-anatomy-lc-deckn { display: block; }
/* with room, the stage reaches into the right margin the way the design points do */
@media (min-width: 1180px) { .c-anatomy-lc-deck.is-stage { width: min(900px, 50vw + 310px - 48px); } }
@media (max-width: 599.98px) { .c-anatomy-lc-slide { padding: 14px; } }
/* a clip's own controls, laid exactly over the video: fitted the way the frame fits the video, or filling the card */
.c-anatomy-vbox { position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; height: 100%; translate: -50% -50%; overflow: hidden; border-radius: inherit; pointer-events: none; }
.mf-work:is(.is-framed, .is-matte) > .c-anatomy-vbox { --pad: clamp(10px, 7cqmin, 56px); width: min(100cqw - 2 * var(--pad), (100cqh - 2 * var(--pad)) * var(--mr)); height: auto; aspect-ratio: var(--mr); }
.mf-work.is-framed > .c-anatomy-vbox { border-radius: clamp(4px, 1.5cqmin, 12px); }
.mf-work.is-matte > .c-anatomy-vbox { --pad: 0px; }
.mf-work.is-matte.is-inset > .c-anatomy-vbox { --pad: clamp(10px, 7cqmin, 56px); }
.c-anatomy-lc .mf-work.is-video video { cursor: pointer; }
/* the button appears when the pointer rests on the clip, for a moment after a press, and stays while it is paused */
.c-anatomy-vbtn { position: absolute; right: 12px; bottom: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in oklch, var(--ink) 62%, transparent); color: var(--raised); pointer-events: auto; opacity: 0; scale: 0.9; transition: opacity 160ms var(--ease-out), scale 160ms var(--ease-out); }
.c-anatomy-vbtn:active { scale: 0.92; }
.c-anatomy-vbtn .is-pause, .mf-work.is-playing .c-anatomy-vbtn .is-play { display: none; }
.mf-work.is-playing .c-anatomy-vbtn .is-pause { display: block; }
@media (hover: hover) and (pointer: fine) { .mf-work:hover > .c-anatomy-vbox .c-anatomy-vbtn { opacity: 1; scale: 1; transition-delay: 400ms; } }
.mf-work:is(.is-told, .is-held) > .c-anatomy-vbox .c-anatomy-vbtn, :root[data-motion="reduced"] .mf-work:not(.is-playing) > .c-anatomy-vbox .c-anatomy-vbtn, .c-anatomy-vbtn:focus-visible { opacity: 1; scale: 1; transition-delay: 0ms; }
.c-anatomy-vbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* where the clip is: a 2px line along its bottom edge, 4px while the pointer is on it; pressing or dragging moves it */
.c-anatomy-vline { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: auto; cursor: pointer; touch-action: none; }
.c-anatomy-vline::before, .c-anatomy-vline i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transition: height 160ms var(--ease-out); }
.c-anatomy-vline::before { content: ""; background: color-mix(in oklch, var(--ink) 14%, transparent); }
.c-anatomy-vline i { background: color-mix(in oklch, var(--ink) 70%, transparent); transform-origin: left; scale: 0 1; }
.mf-work:is(:hover, .is-scrub) .c-anatomy-vline i, .mf-work:is(:hover, .is-scrub) .c-anatomy-vline::before { height: 4px; }
/* a board case: titles written on the table, points on sticky notes, before -> after as a plain and a tinted note */
.c-anatomy-cut.is-ptitle .c-anatomy-paper { gap: 10px; padding: 8px 0 4px; border-color: transparent; background: none; }
.c-anatomy-cut.is-ptitle h3 { margin: 0; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); text-wrap: balance; }
.c-anatomy-cut.is-ptitle p { margin: 0; max-width: 34em; font: var(--b2-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-cut.is-ptitle strong { font-weight: 600; color: var(--ink); }
.c-anatomy-cut.is-bnote .c-anatomy-paper { padding: 18px; }
.c-anatomy-bn { font: var(--b3-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-bn strong { display: block; margin-bottom: 6px; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
.c-anatomy-cut.is-before .c-anatomy-q { -webkit-line-clamp: unset; color: var(--muted); }
.c-anatomy-cut.is-before .c-anatomy-q strong { color: var(--body); }
.c-anatomy-cut.is-after .c-anatomy-paper, .c-anatomy-cut.is-before .c-anatomy-paper { padding: 18px; }
.c-anatomy-cut:is(.is-before, .is-after) .c-anatomy-q strong { display: block; margin-bottom: 6px; font: var(--h3-font); letter-spacing: var(--h3-track); }
.c-anatomy-cut.is-after .c-anatomy-q { -webkit-line-clamp: unset; }
.c-anatomy-cut.is-after::after { content: "→"; position: absolute; left: -22px; top: 50%; translate: 0 -50%; color: var(--accent); font: var(--b2-font); }
.c-anatomy-cut.is-num .c-anatomy-paper > span:first-child { color: var(--ink); font-weight: 500; }
/* small print under the text it belongs to, set like a caption */
.c-anatomy-lc-note { margin-top: -4px !important; font: var(--l2-font); color: var(--muted); }
.c-anatomy-lc-said .c-anatomy-art-shot { margin: 0 0 0 16px; }
.c-anatomy-psub { margin: 0 0 10px; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); }
.c-anatomy-plead + .c-anatomy-plead { margin-top: 10px; }
.c-anatomy-plead strong, .c-anatomy-cut.is-psec strong { font-weight: 600; color: var(--ink); }
.c-anatomy-art-small.is-end { margin-top: 64px; }
.c-anatomy-art-next { display: inline-flex; gap: 8px; margin-top: 28px; font: var(--h3-font); letter-spacing: var(--h3-track); color: var(--ink); text-decoration: none; }
@media (min-width: 900px) { .c-anatomy-art-m.is-wide { margin-inline: -48px; } }
/* reduced motion: no travelling, a short crossfade into where it ends */
.c-anatomy.is-fade .c-anatomy-stage { opacity: 0.35; transition: none !important; }

/* an idea with a clip: the video sits on top, its words underneath */
.c-anatomy-cut.is-clip .c-anatomy-paper { gap: 10px; padding: 12px; }
.c-anatomy-clip { position: relative; flex: none; width: 100%; }
.c-anatomy-clip > :is(.mf-work, .mf-media) { width: 100%; height: 100%; }
.c-anatomy-cut.is-clip .c-anatomy-text { -webkit-line-clamp: 4; font: var(--l2-font); }

/* ideas on the table carry their date and nothing else; an essay opens in place */
.c-anatomy-cfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.c-anatomy-rmore { font: var(--l1-font); font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.c-anatomy-rmore span + span, .c-anatomy-cut.is-open .c-anatomy-rmore span { display: none; }
.c-anatomy-cut.is-open .c-anatomy-rmore span + span { display: inline; }
.c-anatomy-read { display: flex; flex-direction: column; gap: 8px; font: var(--l2-font); color: var(--ink); animation: c-anatomy-in 320ms var(--ease-out) both; }
.c-anatomy-read[hidden] { display: none; }
/* a section introduces itself the same way everywhere: its name in one medium display size, an action beside it when it
   has one, a lead line under it when it has one. Anchored by its bottom edge a set distance above its first content. */
.c-anatomy-sect { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: max-content; transform: translateY(-100%); transition: opacity 400ms var(--ease-out); }
.c-anatomy-sect-row { display: flex; align-items: center; gap: 16px; }
.c-anatomy-sect-t { margin: 0; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); white-space: nowrap; }
.c-anatomy-sect-lead { max-width: 30ch; margin: 0; font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--body); text-wrap: balance; }
.c-anatomy-sect.is-dim { pointer-events: none; }
/* the Ideas timeline: a thin rail like the Work axis, turned downward; each day's date on a mark at its left */
.c-anatomy-irail { position: absolute; z-index: 1; width: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; transition: opacity 400ms var(--ease-out); }
.c-anatomy-irail::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 0; width: 2px; border-radius: 1px; background: var(--line-2); }
.c-anatomy-imark { position: absolute; left: 0; width: 0; height: 0; transition: top 320ms var(--ease-drawer); }
.c-anatomy-imark::before { content: ""; position: absolute; left: -6px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.c-anatomy-imark:first-child::before { box-shadow: 0 0 0 4px var(--paper), 0 0 0 9px color-mix(in oklch, var(--accent) 16%, transparent); }
.c-anatomy-imark span { position: absolute; right: 22px; top: 16px; translate: 0 -50%; font: var(--l3-font); letter-spacing: var(--l3-track); color: var(--muted); white-space: nowrap; }
:root[data-motion="reduced"] .c-anatomy-imark { transition: none; }
.c-anatomy-write { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--body); font: var(--l1-font); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), scale var(--d-press) var(--ease-out); }
.c-anatomy-write:active { scale: 0.97; }

/* who she is: set on the table as type rather than a card, and the same words open the list */
.c-anatomy-hk { margin: 0; font: var(--h2-font); letter-spacing: var(--h2-track); font-weight: 500; color: var(--muted); }
.c-anatomy-hh { margin: 8px 0 0; font: var(--h1-font); letter-spacing: var(--h1-track); color: var(--ink); text-wrap: balance; }
.c-anatomy-hi { margin: 26px 0 0; max-width: 24ch; font: var(--b1-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-hn { margin: 14px 0 0; font: var(--b2-font); color: var(--muted); }
.c-anatomy-cut.is-introcard { border-radius: 24px; }
.c-anatomy-cut.is-introcard .c-anatomy-paper { gap: 0; padding: 30px 32px 32px; }
.c-anatomy-cut.is-introcard .c-anatomy-hh { font: var(--h1-font); letter-spacing: var(--h1-track); }



/* her principles: her own sticky notes, tinted from the accent so they read as hers and not as quotes */
.c-anatomy-cut.is-ptint-0 { --pnote: color-mix(in oklch, var(--accent) 22%, var(--fill-2)); }
.c-anatomy-cut.is-ptint-1 { --pnote: color-mix(in oklch, var(--accent) 12%, var(--fill-2)); }
.c-anatomy-cut.is-principle { border-radius: var(--r-s); }
.c-anatomy-cut.is-principle .c-anatomy-paper { gap: 14px; padding: 22px 22px 24px; border-color: transparent; background: var(--pnote); }
.c-anatomy-cut.is-principle .c-anatomy-ptext { font: var(--h2-font); letter-spacing: var(--h2-track); }
.c-anatomy-pdesc { display: block; margin-top: 2px; font: var(--l2-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-ptext { font: var(--h2-font); letter-spacing: var(--h2-track); color: var(--ink); text-wrap: balance; }
.c-anatomy-ptext > span { display: block; }
/* "A > B": the favoured idea on its own line, then the ">" hanging in a small column of air with the other idea beside it */
.c-anatomy-pover { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.32em; margin-top: 0.14em; }
.c-anatomy-pgt { font-weight: 400; color: var(--muted); }
.c-anatomy-pb { font-weight: 500; color: var(--body); }

/* kind words: the quotes as sticky notes in calm tints, the saved screenshots and cards as plain images */
.c-anatomy-cut.is-note { border-radius: var(--r-s); }
.c-anatomy-cut.is-note .c-anatomy-paper { gap: 14px; padding: 20px 20px 18px; border-color: transparent; background: var(--note); }
.c-anatomy-cut.is-tint-0 { --note: color-mix(in oklch, var(--accent) 9%, var(--raised)); }
.c-anatomy-cut.is-tint-1 { --note: var(--raised); }
.c-anatomy-cut.is-tint-2 { --note: color-mix(in oklch, var(--accent) 5%, var(--fill)); }
.c-anatomy-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin: 0; font: var(--b3-font); color: var(--ink); text-wrap: pretty; }
.c-anatomy-by { display: flex; flex-direction: column; gap: 1px; margin-top: auto; font: var(--l2-font); color: var(--muted); }
.c-anatomy-by b { font: var(--l1-font); font-weight: 600; color: var(--ink); }
/* The marks are rounded, at her word (22 Oct). The box already clips, so the radius is all it takes:
   8px on a 78x28 box reads as a corner rather than as a pill, and holds up on the shorter Google X box. */
.c-anatomy-logo { position: relative; display: block; flex: none; overflow: hidden; width: 78px; height: 28px; margin-left: -1px; border-radius: 8px; }
.c-anatomy-logo img { display: block; max-width: none; mix-blend-mode: multiply; opacity: 0.72; pointer-events: none; }
/* the McKinsey mark is white on its own navy square: cropped to the words and turned to ink, like the X mark */
.c-anatomy-logo[data-org="mckinsey"] img { position: absolute; left: 50%; top: 50%; width: 154%; height: auto; translate: -50% -47.7%; filter: invert(1) grayscale(1) brightness(1.4); }
.c-anatomy-logo[data-org="googlex"] { width: auto; height: 19px; margin-top: 5px; }
.c-anatomy-logo[data-org="googlex"] img { width: auto; height: 100%; filter: grayscale(1); }
.c-anatomy-cut.is-shot { border-radius: 10px; }
.c-anatomy-cut.is-kudos { border-radius: 16px; }
.c-anatomy-shot { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* who else is on the board: their cursors ride with the table, chips mark what they rest on */
.c-anatomy-peers { position: absolute; left: 0; top: 0; z-index: 6000; width: 0; height: 0; pointer-events: none; }
.c-anatomy-seen { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--body); font: var(--l1-font); font-weight: 500; white-space: nowrap; }
.c-anatomy-seen i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
/* presence: a floating pill top right with overlapping avatars, and a popover of who is here and where */
.c-anatomy-here { position: absolute; right: 16px; top: 14px; z-index: 21; }
/* out of sight until a keyboard reaches it, then a small pill at the top left */
.c-anatomy-skip { position: absolute; left: 16px; top: 14px; z-index: 30; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--island); color: var(--island-ink); font: var(--l1-font); font-weight: 500; opacity: 0; pointer-events: none; translate: 0 -8px; }
.c-anatomy-skip:focus-visible { opacity: 1; pointer-events: auto; translate: 0 0; outline-offset: 3px; }
/* The ways to reach her are not in the header: they are on Home, in words, under Elsewhere. Her picture in the
   pill is the link home and nothing else, so nothing folds out of it. */
.c-anatomy-cdot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
/* the small print, out of the way at the foot of the table */
.c-anatomy-foot { position: absolute; left: 16px; bottom: calc(var(--dock-space) - 80px); z-index: 21; display: flex; align-items: center; gap: 8px; height: 30px; margin: 0; padding: 0 12px; border: 1px solid var(--an-pill-line); border-radius: 999px; background: var(--an-pill-bg); box-shadow: var(--an-pill-shadow); color: var(--muted); font: var(--l2-font); }
.c-anatomy-foot a, .c-anatomy-lfoot a { color: var(--muted); text-decoration: none; transition: color var(--d-state) var(--ease-out); }
.c-anatomy[data-view="list"] .c-anatomy-foot { display: none; }
/* The small print follows what the page ends with rather than standing a screen below it: on Home that is
   the band of her drawings, and 56px of air over the copyright read as a hole. */
/* 8px under what it follows, at her word (22 Oct): it is a line of small print, not a section of its own. */
.c-anatomy-lfoot { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 620px; margin: 0 auto; padding: 8px 24px calc(var(--dock-space) - 24px); color: var(--muted); font: var(--l2-font); }
/* who is here: the same pill as the pages, its avatars the height of a page segment and inside its padding */
.c-anatomy-faces { cursor: pointer; }
.c-anatomy-av { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--ci); box-shadow: 0 0 0 1.5px var(--an-pill-bg); font: var(--l3-font); letter-spacing: var(--l3-track); font-weight: 600; transition: scale var(--d-press) var(--ease-out); }
.c-anatomy-av + .c-anatomy-av { margin-left: -8px; }
.c-anatomy-av.is-you { box-shadow: 0 0 0 1.5px var(--an-pill-bg), inset 0 0 0 1.5px color-mix(in oklch, var(--ink) 60%, transparent); }
.c-anatomy-av.is-more { background: var(--fill-2); color: var(--body); font: var(--l3-font); letter-spacing: var(--l3-track); }
.c-anatomy-av.is-count { width: auto; min-width: 28px; padding: 0 9px; border-radius: 14px; font: var(--l3-font); letter-spacing: var(--l3-track); }
.c-anatomy-av:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.c-anatomy-tip { position: absolute; top: calc(100% + 10px); right: -4px; padding: 4px 9px; border-radius: 7px; background: var(--ink); color: var(--raised); font: var(--l1-font); font-weight: 500; white-space: nowrap; opacity: 0; translate: 0 -3px; pointer-events: none; transition: opacity 140ms var(--ease-out), translate 140ms var(--ease-out); }
.c-anatomy-av:is(:hover, :focus-visible) .c-anatomy-tip { opacity: 1; translate: 0 0; transition-delay: 60ms; }
.c-anatomy-here.is-open .c-anatomy-tip { opacity: 0; transition-delay: 0ms; }
.c-anatomy-whopop { position: absolute; right: 0; top: calc(100% + 10px); display: flex; flex-direction: column; gap: 6px; width: 268px; padding: 10px 6px 6px; border: 1px solid var(--an-pill-line); border-radius: 20px; background: var(--an-pill-bg); box-shadow: var(--an-pill-shadow); opacity: 0; translate: 0 -4px; visibility: hidden; transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out), visibility 0s linear 160ms; }
.c-anatomy-here.is-open .c-anatomy-whopop { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
.c-anatomy-whoh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 10px 2px; font: var(--l1-font); font-weight: 600; color: var(--muted); }
.c-anatomy-person { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 1px 10px; align-items: center; width: 100%; padding: 7px 10px; border-radius: 9px; text-align: left; font: var(--l1-font); color: var(--ink); transition: background-color 150ms var(--ease-out); }
.c-anatomy-person i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
button.c-anatomy-person:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.c-anatomy-peers .mf-peer.is-pulse::before { content: ""; position: absolute; left: -15px; top: -15px; width: 36px; height: 36px; border: 2px solid var(--peer); border-radius: 50%; opacity: 0; animation: c-anatomy-pulse 700ms var(--ease-out) 2; }
@keyframes c-anatomy-pulse { from { opacity: 0.9; scale: 0.4; } to { opacity: 0; scale: 1.7; } }

/* stickers people leave: in the world, behind the cutouts, so a click on a cutout still wins */
.c-anatomy-stickers { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; }
.c-anatomy-stk { position: absolute; left: 0; top: 0; width: 132px; height: 132px; }
.c-anatomy-stk .mf-sticker { width: 100%; height: 100%; }
/* the stickers' lettering is drawn at its own size, not re-fitted to the screen at every step of the camera */
.c-anatomy-stk .mf-sticker text { text-rendering: geometricPrecision; }
.c-anatomy-stk-art { display: block; transition: scale var(--d-state) var(--ease-out); }
.c-anatomy-stk.is-mine { cursor: grab; touch-action: none; }
.c-anatomy-stk.is-held { z-index: 1; cursor: grabbing; }
.c-anatomy-stk.is-held .c-anatomy-stk-art { scale: 1.06; }
.c-anatomy-stk:focus-visible { border-radius: 50%; outline: 2px solid var(--accent); outline-offset: 3px; }
.c-anatomy-stk-tag { position: absolute; left: 50%; top: calc(100% - 10px); width: max-content; max-width: 24ch; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--body); font: var(--l1-font); font-weight: 500; white-space: nowrap; opacity: 0; translate: -50% -2px; pointer-events: none; transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out); }
.c-anatomy-stk:is(:hover, :focus-visible, .is-held) .c-anatomy-stk-tag { opacity: 1; translate: -50% 0; }
.c-anatomy-stk-x { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: var(--raised); color: var(--body); opacity: 0; transition: opacity 160ms var(--ease-out), color 150ms var(--ease-out), scale var(--d-press) var(--ease-out); }
.c-anatomy-stk:is(:hover, :focus-within) .c-anatomy-stk-x { opacity: 1; }
.c-anatomy-stk-x svg { width: 11px; height: 11px; }
.c-anatomy-ink { position: absolute; left: 0; top: 0; z-index: 1; width: 5000px; height: 3300px; max-width: none; overflow: visible; pointer-events: none; }
.c-anatomy-people { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.c-anatomy-doing { grid-column: 2; font: var(--l2-font); color: var(--muted); }
.c-anatomy-tag { font: var(--l3-font); letter-spacing: var(--l3-track); font-weight: 500; color: var(--muted); }

/* ---------- Anatomy · the toolbar ---------- */
/* A row of small floating pills over the table, a few px apart: who this is, the pages, the view, the pen. */
.c-anatomy-head { position: absolute; left: 0; top: 14px; z-index: 20; width: max-content; max-width: calc(100% - 20px); translate: calc(50vw - 50%) 0; pointer-events: none; }
.c-anatomy { --an-pill-line: var(--line); --an-pill-bg: var(--raised); --an-pill-shadow: 0 1px 2px oklch(0.2 0.02 265 / 0.05), 0 12px 28px -14px oklch(0.2 0.02 265 / 0.3); }
.c-anatomy-bar { --gap: 6px; position: relative; display: flex; align-items: flex-start; gap: var(--gap); }
.c-anatomy-bar > * { pointer-events: auto; }
/* one pill for everything in the top row: her pill, the pages, the pen, the projects and who is here */
/* Glass, at her word (2026-10-18): the pill floats over a room full of her now, so what is under it shows
   through, blurred and lifted a little, instead of being hidden behind a solid lozenge. The tint is still her
   own raised paper. Where backdrop-filter is not supported the colour alone stands in, which is why the mix
   keeps most of its opacity. */
.c-anatomy-pill { position: relative; display: flex; align-items: center; min-height: 40px; padding: 4px; border: 1px solid color-mix(in oklch, var(--an-pill-line) 70%, transparent); border-radius: 20px; background: color-mix(in oklch, var(--an-pill-bg) 64%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); box-shadow: var(--an-pill-shadow); }
/* right of the pages, one place shared by the pen (on the table) and the projects (in a case): outside the row's own
   width, so whichever shows, and appearing or leaving, moves nothing else */
.c-anatomy-side { position: absolute; left: calc(100% + var(--gap)); top: 0; display: grid; width: max-content; }
.c-anatomy-side > * { grid-area: 1 / 1; justify-self: start; }

/* Her picture, first in the one pill: 28px of her, round, the link home. It leads the pages the way the
   indicator follows them, with the pill's own 4px of padding round it and a hair more air before Work. */
/* Her name at the head of the pill, where her picture used to be: the one piece of the header that says whose
   site this is, and the way home from anywhere. It is a word, so it is shaped like one — no capsule behind it,
   a step quieter than the tabs beside it, and the ink coming up when it is reached. */
.c-anatomy-who {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  margin-right: 10px;
  padding-left: 4px;
  color: var(--ink);
  font: var(--l1-font);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: scale var(--d-press) var(--ease-out), opacity 180ms var(--ease-out);
}
.c-anatomy-who:active { scale: 0.94; }
.c-anatomy-who:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* while her clip is on the table the picture it came from waits, quieter */
.c-anatomy-who.is-out { opacity: 0.4; }
/* her clip on the table: the shell's player itself, lying on the table */
.c-anatomy-cut.is-hi { border-radius: 20px; cursor: default; }
.c-anatomy-cut.is-hi > .mf-intro-frame { width: 100%; height: 100%; }
/* the gap between the pages and the view switch is kept, the rule that was drawn in it is not */
.c-anatomy-idsep { position: relative; flex: none; width: 1px; height: 18px; margin: 0 6px; background: none; }
/* the pages and the view switch share one pill: the sections you travel to, then how you look at them */
.c-anatomy-pages { padding-right: 6px; }
/* the pages pill draws its outline as two round ends and a middle, so it can widen for the projects by transform alone */
/* The pages pill is glass, at her word: the skin below paints a translucent tint and the pill's own box
   does the blurring, which is why the filter is here and the colour is there. The box is the shape the skin
   draws at rest, so the two line up; while the skin is widening for a case the blur leads it by a frame. */
/* The pages pill is glass. The skin below it is three pieces — two round ends and a middle that scales —
   so that the pill can widen for a case by transform alone; painting a translucent tint on all three showed
   the joins, because two translucent fills on top of each other are not the same colour as one. So the pill
   itself carries the fill and the blur, in one box with one radius, and the skin is left to draw the
   hairline and the shadow. */
.c-anatomy-pill.c-anatomy-pages { border-color: color-mix(in oklch, var(--an-pill-line) 70%, transparent); background: color-mix(in oklch, var(--an-pill-bg) 64%, transparent); box-shadow: var(--an-pill-shadow); border-radius: 20px; -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
.c-anatomy-skin { position: absolute; left: -1px; top: -1px; bottom: -1px; z-index: 0; width: 0; pointer-events: none; }
/* The skin is away. It existed to draw the pill's outline as two round ends and a middle so the pill could
   widen for a case by transform alone; as glass that costs more than it buys — three translucent pieces show
   their joins, and a hairline circle at each end reads as a shape of its own. The pill is one box now: one
   fill, one blur, one hairline, one shadow. The pieces are still built and still measured, so putting the
   display back restores the sliding outline. */
.c-anatomy-skin { display: none; }
.c-anatomy-skin > i { position: absolute; top: 0; left: 0; height: 100%; border: 1px solid color-mix(in oklch, var(--an-pill-line) 70%, transparent); background: none; box-shadow: none; transform-origin: 0 0; }
.c-anatomy-skin > i:nth-child(1) { width: 40px; border-radius: 20px; }
.c-anatomy-skin > i:nth-child(3) { width: 40px; border-radius: 20px; transform: translateX(calc(var(--pw, 40px) - 40px)); }
.c-anatomy-skin > i:nth-child(2) { z-index: 1; left: 20px; width: 300px; border-right: 0; border-left: 0; border-radius: 0; transform: scaleX(var(--pm, 0)); }
.c-anatomy-pages:has(.c-anatomy-nav.is-ready) .c-anatomy-skin > i { transition: transform 320ms var(--ease-drawer); }
:root[data-motion="reduced"] .c-anatomy-skin > i { transition: none !important; }

/* the pen off the table, and the projects off a case, step out in place: a fade, a touch smaller, a little left */
.c-anatomy-penwrap { transform-origin: 0 50%; transition: opacity 200ms var(--ease-out), scale 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s; }
.c-anatomy-penwrap.is-away { opacity: 0; scale: 0.94; translate: -6px 0; visibility: hidden; pointer-events: none; transition: opacity 160ms var(--ease-out), scale 160ms var(--ease-out), translate 160ms var(--ease-out), visibility 0s linear 160ms; }

/* the pages, with a small indicator that slides to the one you are on */
.c-anatomy-nav { position: relative; display: inline-flex; gap: 2px; font: var(--l1-font); font-weight: 500; }
.c-anatomy-navpill { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; }
/* the indicator is two round ends and a middle, each moved by a transform, so sliding it to another page never lays
   anything out */
.c-anatomy-navpill > i { position: absolute; top: 0; left: 0; height: 100%; background: var(--fill); transform-origin: 0 0; transition: transform 380ms var(--spring); }
.c-anatomy-navpill > i:nth-child(1) { width: var(--h, 0px); border-radius: 999px; transform: translateX(var(--x, 0px)); }
.c-anatomy-navpill > i:nth-child(2) { width: 1px; transform: translateX(calc(var(--x, 0px) + var(--h, 0px) / 2)) scaleX(var(--mw, 0)); }
.c-anatomy-navpill > i:nth-child(3) { width: var(--h, 0px); border-radius: 999px; transform: translateX(calc(var(--x, 0px) + var(--w, 0px) - var(--h, 0px))); }
.c-anatomy-nav:not(.is-ready) .c-anatomy-navpill > i { transition: none; }
.c-anatomy-nav a { position: relative; z-index: 1; padding: 6px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color var(--d-state) var(--ease-out); }
.c-anatomy-nav a[aria-current="page"] { color: var(--ink); }
/* the view switch: two icons in one small segmented toggle, with a thumb that slides to the view you are on */
/* at rest the switch is only its thumb, in the same fill as the page indicator beside it, so the one pill reads as
   one control; its track and the raised thumb come back under the pointer or a focus ring */
.c-anatomy-views { position: relative; display: inline-flex; padding: 2px; border-radius: 999px; background: none; transition: background-color var(--d-state) var(--ease-out); }
.c-anatomy-views:is(:hover, :focus-within) { background: var(--fill); }
.c-anatomy-viewpill { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: var(--w, 0px); border-radius: 999px; background: var(--fill); box-shadow: none; translate: var(--x, 0px) 0; transition: translate 320ms var(--ease-drawer), width 320ms var(--ease-drawer), background-color var(--d-state) var(--ease-out), box-shadow var(--d-state) var(--ease-out); }
.c-anatomy-views:is(:hover, :focus-within) .c-anatomy-viewpill { background: var(--raised); box-shadow: 0 0 0 1px var(--line), 0 1px 2px oklch(0.2 0.02 265 / 0.08); }
.c-anatomy-views:not(.is-ready) .c-anatomy-viewpill { transition: none; }
.c-anatomy-views button { position: relative; z-index: 1; display: grid; place-items: center; height: 26px; padding: 0 11px; border-radius: 999px; color: var(--muted); font: var(--l1-font); font-weight: 500; white-space: nowrap; transition: color var(--d-state) var(--ease-out); }
.c-anatomy-views button[aria-pressed="true"] { color: var(--ink); }
.c-anatomy-views button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Work opens in place inside a case: the item widens to hold a back arrow and the projects, which fade in once it has
   started to open; outside a case it narrows back to its word. Approach and Ideas slide along with it. */
.c-anatomy-work { position: relative; display: grid; align-items: center; justify-items: start; overflow: clip; overflow-clip-margin: 4px; }
.c-anatomy-work > * { grid-area: 1 / 1; }
.c-anatomy-cases { display: inline-flex; align-items: center; gap: 2px; opacity: 0; visibility: hidden; transition: opacity 140ms var(--ease-out), visibility 0s linear 140ms; }
.c-anatomy-work.is-open .c-anatomy-cases { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-out) 110ms, visibility 0s; }
/* inside a case Approach and Ideas step out of the row (still measured), and come back as the projects go */
.c-anatomy-work ~ a { transition: color var(--d-state) var(--ease-out), opacity 240ms var(--ease-out) 110ms; }
.c-anatomy-work.is-open ~ a { position: absolute; visibility: hidden; opacity: 0; transition: none; }
.c-anatomy-worklink { transition: opacity 180ms var(--ease-out) 60ms, visibility 0s; }
.c-anatomy-work.is-open .c-anatomy-worklink { opacity: 0; visibility: hidden; transition: opacity 120ms var(--ease-out), visibility 0s linear 120ms; }
.c-anatomy-nav a.c-anatomy-wback { display: grid; place-items: center; padding: 6px 9px; }
.c-anatomy-wback svg { width: 14px; height: 14px; max-width: none; }

/* two views of one content: the canvas fades back, the list comes up a little into place */
.c-anatomy-stage { transition: opacity 420ms var(--ease-out); }
.c-anatomy[data-view="list"] .c-anatomy-stage { opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms; }
.c-anatomy-list { position: absolute; inset: 0; z-index: 3; background: var(--paper); -webkit-user-select: text; user-select: text; transition: opacity 420ms var(--ease-out) 60ms, translate 520ms var(--ease-out) 60ms; }
.c-anatomy[data-view="canvas"] .c-anatomy-list { opacity: 0; translate: 0 12px; visibility: hidden; transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out), visibility 0s linear 240ms; }
.c-anatomy[data-view="list"] .c-anatomy-tidy { opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }

/* the pen: one toggle, with the shared inks under it */
.c-anatomy-draw { position: relative; display: inline-flex; align-items: center; }
.c-anatomy-pen { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; color: var(--body); transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), scale var(--d-press) var(--ease-out); }
.c-anatomy-pen svg { flex: none; }
.c-anatomy-nib { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.c-anatomy-pen[aria-pressed="true"] { background: var(--ink); color: var(--raised); }
.c-anatomy-inks { position: absolute; left: 50%; top: calc(100% + 13px); z-index: 5; display: flex; gap: 7px; padding: 7px 9px; border: 1px solid var(--an-pill-line); border-radius: 999px; background: var(--an-pill-bg); box-shadow: var(--an-pill-shadow); opacity: 0; translate: -50% -4px; pointer-events: none; transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out); }
.c-anatomy.is-pen .c-anatomy-inks,
.c-anatomy-draw:is(:hover, :focus-within) .c-anatomy-inks { opacity: 1; translate: -50% 0; pointer-events: auto; }
.c-anatomy-sw { width: 18px; height: 18px; border-radius: 50%; background: var(--c); transition: scale var(--d-press) var(--ease-out), box-shadow 150ms var(--ease-out); }
.c-anatomy-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--raised), 0 0 0 3.5px var(--ink); }
.c-anatomy.is-pen .c-anatomy-stage { cursor: crosshair; }
.c-anatomy.is-travel .c-anatomy-stage { cursor: grab; }

/* Tidy up waits until something has been moved, fades in, and goes again once everything is back in its place */
.c-anatomy-tidy { position: absolute; right: 16px; bottom: calc(var(--dock-space) + 8px); z-index: 20; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklch, var(--raised) 92%, transparent); color: var(--body); font: var(--l1-font); font-weight: 500; opacity: 0; visibility: hidden; transition: opacity var(--d-state) var(--ease-out), visibility 0s linear var(--d-state), color 150ms var(--ease-out), border-color 150ms var(--ease-out), scale var(--d-press) var(--ease-out); }
.c-anatomy-tidy.is-on { opacity: 1; visibility: visible; transition: opacity var(--d-state) var(--ease-out), visibility 0s, color 150ms var(--ease-out), border-color 150ms var(--ease-out), scale var(--d-press) var(--ease-out); }
.c-anatomy-tidy svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .c-anatomy-plane.is-main .c-anatomy-cut:not(.is-lifted, .is-dim, .is-out, .is-era):hover { translate: 0 -2px; }
  .c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.is-era.is-openable:not(.is-lifted, .is-dim):hover { translate: 0 -2px; }
  .c-anatomy-plane.is-main:not(.is-case) .c-anatomy-cut.is-era.is-openable:not(.is-lifted, .is-dim):hover::after { opacity: 1; }
  .c-anatomy.is-pen .c-anatomy-cut.is-era.is-openable { cursor: crosshair; }
  .c-anatomy-nav a:not([aria-current]):hover, .c-anatomy-tidy:hover { color: var(--ink); }
  .c-anatomy-reachl :is(a, .mf-copy):hover, .c-anatomy-foot a:hover, .c-anatomy-lfoot a:hover { color: var(--ink); }
/* ---------- the bar of her drawings at the foot of Approach ----------
   One drawing per claim, the first there from the start and the rest arriving as the reader reaches
   them. A mark that has not been reached keeps its place, so the bar does not shuffle as it fills. */
.c-anatomy-apnav { position: fixed; left: 50%; bottom: 24px; z-index: 22; translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
  background: color-mix(in oklch, var(--raised) 46%, transparent);
  -webkit-backdrop-filter: saturate(1.9) blur(26px); backdrop-filter: saturate(1.9) blur(26px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 1px 1px oklch(0.2 0.02 265 / 0.04), 0 12px 28px -14px oklch(0.2 0.02 265 / 0.26); }
.c-anatomy-apnav-b { display: grid; place-items: center; width: 0; height: 34px; padding: 0; border: 0;
  border-radius: 999px; background: none; cursor: pointer; opacity: 0; overflow: hidden;
  transition: width 420ms var(--ease-out), opacity 320ms var(--ease-out), background-color 160ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms); }
.c-anatomy-apnav-b.is-in { width: 34px; opacity: .5; }
.c-anatomy-apnav-b.is-in.is-at, .c-anatomy-apnav-b.is-in:hover { opacity: 1; background: color-mix(in oklch, var(--ink) 8%, transparent); }
.c-anatomy-apnav-b img { width: 26px; height: 26px; object-fit: contain; }
.c-anatomy-apnav-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* At the foot the drawings step aside and the bar says what Work's bar says there. */
.c-anatomy-apnav-foot { display: flex; align-items: center; gap: 0; width: 0; overflow: hidden; opacity: 0;
  color: var(--ink); font: var(--l2-font); white-space: nowrap; pointer-events: none;
  transition: width 360ms var(--ease-out), opacity 240ms var(--ease-out), padding 360ms var(--ease-out); }
.c-anatomy-apnav.is-foot .c-anatomy-apnav-foot { width: auto; padding: 0 8px; opacity: 1; pointer-events: auto; }
.c-anatomy-apnav.is-foot .c-anatomy-apnav-b { width: 0; opacity: 0; pointer-events: none; }
.c-anatomy-apnav-foot b { font-weight: 600; }
/* The bar carries the copyright on this page, so the line printed under it does not — the same as on
   Work, where the bar at the foot took it over. */
.c-anatomy-lpage[data-list="approach"] .c-anatomy-lfoot { display: none; }
:root[data-motion="reduced"] .c-anatomy-apnav-b { transition: none; }
  .c-anatomy-tidy:hover { border-color: var(--line-2); }
  .c-anatomy-go:hover { background: var(--body); }
  .c-anatomy-next:hover b > span { translate: 3px 0; }
  .c-anatomy-pen:not([aria-pressed="true"]):hover, button.c-anatomy-person:hover { background: var(--fill); color: var(--ink); }
  .c-anatomy-views button:not([aria-pressed="true"]):hover { color: var(--ink); }
  .c-anatomy-av:hover { scale: 1.06; }
  .c-anatomy-sw:hover { scale: 1.12; }
  .c-anatomy-stk-x:hover { color: var(--ink); border-color: var(--line-2); }
}
/* a finger gets at least 44px to land on for every control, as an invisible area around it: nothing moves. The page
   links and the view buttons are already placed (Approach and Ideas step out absolutely inside a case), so they keep
   their own positioning; the rest are given a place for the area to hang from */
@media (pointer: coarse) {
  :is(.c-anatomy-who, .c-anatomy-pen, .c-anatomy-art-next, .c-anatomy-lfoot a, .c-anatomy-foot a) { position: relative; }
  :is(.c-anatomy-nav a, .c-anatomy-views button, .c-anatomy-who, .c-anatomy-pen, .c-anatomy-art-next, .c-anatomy-lc-deeplink, .c-anatomy-lc-deepbar a, .c-anatomy-lfoot a, .c-anatomy-foot a)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }
}
@media (max-width: 719.98px) {
  .c-anatomy-head.is-case-head ~ .c-anatomy-here { display: none; }
  .c-anatomy-views button { padding: 0 8px; font: var(--l1-font); }
  /* the pills stay on one row: her name has already stepped out, the labels get tighter */
  .c-anatomy-head { top: 10px; max-width: calc(100% - 12px); }
  .c-anatomy-bar { --gap: 4px; }
  .c-anatomy-pill { padding: 3px; }
  .c-anatomy-here { top: 10px; right: 10px; }
  .c-anatomy-nav { gap: 0; }
  .c-anatomy-nav a { padding: 6px 5px; font: var(--l1-font); }
  .c-anatomy-pen { gap: 5px; height: 28px; padding: 0 8px; }
  .c-anatomy-tidy { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .c-anatomy-tidy span { display: none; }
}

/* ---------- Anatomy · the list view ---------- */
/* The list is Quiet index's own pages inside these pills. Each page scrolls on its own inside the stage, and the
   index brings its own spacing, so a page here only positions it. The page on show has no transform once it has risen
   in, so the index's hover preview, which is position: fixed, follows the pointer across the whole window. */
/* clipped sideways so nothing that reaches past the column — the timeline's fan on a narrow window — can ever
   put a sideways scrollbar under the page */
.c-anatomy-lpage { position: absolute; inset: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; opacity: 0; translate: 0 8px; visibility: hidden; transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s linear 200ms; }
/* no page has a band under the header: every one of them fades its words out under the floating nav rather than
   letting a line pass behind it. Every page starts clear of the pill, so nothing is dimmed at rest. */
.c-anatomy-lpage { -webkit-mask-image: linear-gradient(transparent 0, transparent 52px, #000 104px); mask-image: linear-gradient(transparent 0, transparent 52px, #000 104px); }
.c-anatomy-lpage.is-on { opacity: 1; translate: none; visibility: visible; transition: opacity 360ms var(--ease-out) 90ms, translate 460ms var(--ease-out) 90ms, visibility 0s; }
.c-anatomy-klabel { display: block; margin: 0; font: var(--l3-font); letter-spacing: var(--l3-track); color: var(--muted); }
.c-anatomy-era.is-now::before { box-shadow: 0 0 0 4px var(--paper), 0 0 0 9px color-mix(in oklch, var(--accent) 16%, transparent); }

/* ---------- her approach: four principles, read at the pace you scroll ----------
   One column of large type, no hairlines, plenty of air. The words sit at 28% ink and come to full ink as the
   reading line — a band a little above the middle, where the rest of the site reads from — passes them, sweeping
   left to right within each line. The light is tied to the scroll itself, so scrolling back up un-lights it.
   Only opacity ever animates: nothing that could move a word is touched. Until the page has been measured nothing
   is dim, so without JavaScript, without scroll timelines, or with motion turned down it simply reads. */
.c-anatomy-lap { --ap-dim: 0.28; --ap-measure: var(--measure); }
/* a runway at the end, so the last line can still reach the reading line.
   The page is the column: it is only as wide as the measure its type reads at and sits in the middle of the
   window, instead of hanging on the left edge every other page shares. The words keep their own left edge inside
   it — the column is centred, not the text — and the room that leaves on either side is where a proof card goes. */
/* one column, as wide as the widest of the two and centred in the page, so her story and her principles keep the
   one left edge between them rather than each being centred on its own width */
.c-anatomy-lap.is-page { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; padding-bottom: 58vh; }
.c-anatomy-lap.is-page > :is(.c-anatomy-apstory, .c-anatomy-lprinciples) { max-width: 100%; }
.c-anatomy-apstory { margin: 0 0 clamp(40px, 7vh, 64px); }
.c-anatomy-apstory p { max-width: var(--ap-measure); margin: 0; font: var(--b1-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-apstory p + p { margin-top: 28px; }
/* Her sticker, set in the line like an emoji: a cap-height picture that sits on the baseline with the words
   either side of it, never a block that breaks the paragraph. */
.c-anatomy-apemoji {
  display: inline-block;
  width: auto;
  height: 1.5em;
  vertical-align: -0.34em;
  margin: 0 0.12em;
  object-fit: contain;
}
/* A claim inside her story is a paragraph like the ones around it: same size, same measure, same gap. Her claim
   leads it in full ink and the rest of the line is the body colour, so the page reads straight through and the
   claims are simply the sentences that carry the weight. */
.c-anatomy-apclaim { max-width: var(--ap-measure); margin: 28px 0 0; font: var(--b1-font); color: var(--body); text-wrap: pretty; }
.c-anatomy-apclaim b { font-weight: 600; color: var(--ink); }
.c-anatomy-apstory .c-anatomy-apclaim + p { margin-top: 28px; }
@supports (animation-timeline: scroll()) {
  .c-anatomy-lpage.is-pacing { scroll-timeline: --ap y; }
  .c-anatomy-lap.is-paced .c-anatomy-w { animation: c-anatomy-ink linear both; animation-timeline: --ap; animation-range: var(--ap-a) var(--ap-b); }
  /* what is already above the reading line when the page opens is simply there */
  .c-anatomy-lap.is-paced .c-anatomy-w.is-lit { animation: none; opacity: 1; }
  @keyframes c-anatomy-ink { from { opacity: var(--ap-dim); } to { opacity: 1; } }
}
/* ----- the Approach page, written out as you read it -----
   A block waits, then its words arrive one at a time with a caret riding the last of them. The caret is a
   thin rule after the word rather than a character, so it never changes where anything sits. */
.c-anatomy-lap.is-typing .c-anatomy-apstory > .is-waiting { opacity: 0; }
.c-anatomy-lap.is-typing .c-anatomy-apstory > * { transition: opacity 180ms var(--ease-out); }
.c-anatomy-lap.is-typing .c-anatomy-w { opacity: 0; }
.c-anatomy-lap.is-typing .c-anatomy-w.is-typed { opacity: 1; }
.c-anatomy-lap.is-typing .c-anatomy-w.is-caret { position: relative; }
.c-anatomy-lap.is-typing .c-anatomy-w.is-caret::after {
  content: "";
  position: absolute;
  left: calc(100% + 0.12em);
  top: 0.12em;
  bottom: 0.12em;
  width: 2px;
  background: var(--accent);
  animation: c-anatomy-caret 760ms steps(1, end) infinite;
}
@keyframes c-anatomy-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* once a block is written its words are simply words again */
.c-anatomy-lap.is-written .c-anatomy-w,
.c-anatomy-lap .c-anatomy-apstory > .is-written .c-anatomy-w { opacity: 1; }
/* the switch for the sound of it, at the end of the page where it is not in the way of reading */
.c-anatomy-apsound-dot {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.c-anatomy-apsound[aria-pressed="true"] .c-anatomy-apsound-dot { background: currentColor; }
.c-anatomy-apsound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(32px, 6vh, 56px);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font: var(--l2-font);
  cursor: pointer;
}
.c-anatomy-apsound[aria-pressed="true"] { color: var(--ink); }
.c-anatomy-apsound span { font-size: 9px; line-height: 1; color: var(--accent); }
@media (hover: hover) { .c-anatomy-apsound:hover { background: var(--fill); } }

@media (prefers-reduced-motion: reduce) { .c-anatomy-w { animation: none !important; opacity: 1 !important; } }
:root[data-motion="reduced"] .c-anatomy-w { animation: none !important; opacity: 1 !important; }
@media (max-width: 599.98px) {
  .c-anatomy-lap.is-page { padding-bottom: 52vh; }
  .c-anatomy-lap.is-page .c-anatomy-lprinciples { margin-top: clamp(40px, 12vh, 96px); }
}

/* ---------- the words with something real behind them ----------
   A handful of words on the Approach page (data.proofs) have a testimonial or a screen from her work standing
   behind them. At rest they are her prose with one hand-drawn line under them, in her coral taken most of the
   way into the paper; resting on one — or tabbing to it, or simply reading past it — floats that proof beside
   the word as a small card, tilted a degree or two like something taped to the page.
   The line is not text-decoration. It cannot be: every word on this page carries its own opacity as the reading
   line passes, and a decoration drawn through a box with its own opacity is painted per box, so each word used
   to underline itself and the spaces between them carried their own stray marks. It is one SVG stroke per phrase
   now (one per line where a phrase wraps), drawn beside the words rather than through them, so nothing can break
   it up. See drawMarks. It only appears once the behaviour is mounted (is-proofed), so without JavaScript the
   page is simply her prose, with nothing promised that cannot happen. */
.c-anatomy-lap.is-proofed .c-anatomy-proof { cursor: help; border-radius: 4px; }
.c-anatomy-lap.is-proofed .c-anatomy-proof:focus { outline: none; }
.c-anatomy-lap.is-proofed .c-anatomy-proof:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the sheet the strokes are drawn on: it lies under the words, across the whole column, and takes no pointer */
.c-anatomy-lap { position: relative; }
.c-anatomy-marks { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.c-anatomy-marks path {
  fill: none;
  stroke: var(--accent-blush);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 240ms var(--ease-out), stroke-width 240ms var(--ease-out);
}
/* the phrase whose proof is showing: the same hand and the same pink, pressed a little harder */
.c-anatomy-marks path.is-on { stroke: color-mix(in oklch, var(--accent) 70%, var(--paper)); stroke-width: 2.9; }
/* only the marked phrases need to sit above the sheet; the rest of the prose never meets a stroke */
.c-anatomy-lap.is-proofed .c-anatomy-proof { position: relative; z-index: 1; }
/* ----- her hero's phrases are badges -----
   On Approach a marked phrase is her prose with a hand-drawn line under it. Here they are badges, because here
   they are pressable — and they are cut from the header's own nav tab, so the two read as one family: the same
   surface (--fill, which is exactly what the sliding indicator is painted in), the same round ends, the same
   hover, and the tab's padding kept as a proportion rather than as pixels, because this type is her hero's and
   not the pill's. The words keep the size, the weight and the ink of the sentence they stand in: a badge in a
   paragraph, never a toolbar. A small mark of the thing itself goes first — the film's own poster frame, a
   company's mark, GitHub's, a cursor on a shared canvas.
   The padding is given back as a negative margin, so a badge takes only a hair more room than the words inside
   it and her sentence keeps its rhythm: the comma after one still sits against the word it follows. */
.c-quiet-index-herowords.is-proofed .c-anatomy-proof {
  cursor: pointer;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--line-2);
  transition: box-shadow 200ms var(--ease-out), color 200ms var(--ease-out), background-color 200ms var(--ease-out), translate 240ms var(--spring);
}
.c-quiet-index-herowords.is-proofed .c-anatomy-proof.is-tag {
  /* Even on all four sides, measured optically rather than off the line box: an inline element's painted box is
     its font's whole content area, which stands 0.246em above the cap line and 0.215em below the baseline before
     any padding at all — so the vertical padding is the gap she wants LESS that, and the horizontal padding is
     the gap itself, a hair off on the right for the last glyph's side bearing. --tag-gap is that one gap; change
     it and all four sides move together. The mark sits inside this padding rather than adding to it. */
  --tag-gap: 0.34em;
  /* The right-hand gap carries two pixels more than the other three. It is measured to the last glyph's ink,
     where the other sides are measured to a solid edge — the mark's chip, the cap line, the baseline — so an
     even gap on paper reads tight after a letter. Two pixels is what her eye asked for. */
  --tag-tail: 2px;
  padding: calc(var(--tag-gap) - 0.246em) calc(var(--tag-gap) - 0.03em + var(--tag-tail)) calc(var(--tag-gap) - 0.215em) var(--tag-gap);
  /* No negative margin: it was pulling the badge onto the words either side of it. The line is a little longer
     for it, and a badge is a thing in a sentence rather than a thing against one. */
  margin: 0;
  border-radius: 999px;
  background: var(--fill);
  box-shadow: none;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--d-state) var(--ease-out);
}
.c-quiet-index-herowords.is-proofed .c-anatomy-proof.is-on { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
/* pointed at, or its preview out: the surface deepens one step and the mark lifts a hair. The nav tab's hover. */
/* Resting on a badge lifts the badge, not the mark inside it. The mark used to rise a hair on its own, which
   read as the icon coming loose from the word it belongs to; now the whole thing comes off the paper by a pixel
   and takes a soft shadow with it, the way every other object on this site answers a pointer. */
.c-quiet-index-herowords.is-proofed .c-anatomy-proof.is-tag.is-on {
  background: var(--fill-2);
  translate: 0 -1px;
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent),
    0 6px 14px -6px color-mix(in oklch, var(--ink) 26%, transparent);
}
.c-quiet-index-herowords.is-proofed .c-anatomy-proof:focus { outline: none; }
.c-quiet-index-herowords.is-proofed .c-anatomy-proof:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ----- the mark a badge wears -----
   One box for all five, set once here so they can never drift apart: the film's poster frame, Miro's mark,
   McKinsey's, GitHub's and the cursor all sit in the same square with the same corners. The size is 1em of
   whichever of her hero's two registers the badge stands in — 24px in her opening paragraph, which is the size
   the header's own marks and a row head's company mark are, and 18px in the paragraph under it — and the radius
   is .mf-logo's own rule, a quarter of the box, moved onto the box so a picture and a glyph round alike.
   Whatever is inside fits the box and never sets it: a picture covers it, a glyph is drawn to its edges.
   vertical-align: middle is the row head's own optical centring — the mark sits on the text's centre line
   rather than on its own box's — and the mark rides inside its first word, so a line break can never part them. */
.c-anatomy-w.is-tagw { white-space: nowrap; }
/* her sentence's own comma or full stop, set tight against the badge it follows: one word space, so the gap
   before a badge and the gap after it are the same gap */
.c-anatomy-w.is-aftertag { margin-left: 0.22em; }
.c-anatomy-tagi {
  /* One size for every badge icon, in pixels rather than ems: her first paragraph is set larger than her second,
     and at 1em the same badge was 24px in one and 18px in the other — the one thing she asked against. */
  --tagi: 22px;
  display: inline-block;
  flex: none;
  width: var(--tagi);
  height: var(--tagi);
  margin-right: 0.26em;
  overflow: hidden;
  border-radius: calc(var(--tagi) / 4);
  background: var(--fill-2);
  /* on the cap band's own centre, which is where the timeline's row head puts a company's mark against its name.
     vertical-align: middle would centre it on the x-height and leave it sitting a couple of pixels low. */
  vertical-align: calc(var(--tagi) / -2 + 0.352em);
}
.c-anatomy-tagi > * { display: block; width: 100%; height: 100%; border-radius: 0; }
.c-anatomy-tagi :is(img, svg) { display: block; width: 100%; height: 100%; }
.c-anatomy-tagi img { object-fit: cover; }
/* her film's poster is a wide frame of a room: it is cropped to her, where a square mark of it has to look */
.c-anatomy-tagi.is-thumb img { object-position: 50% 26%; }
/* A company's mark came with two surfaces behind it — the badge's own chip and the dark plate .mf-logo gives a
   logo everywhere else — and where the artwork has its own rounded corners the plate showed through them as a
   ring round the mark. In a badge the mark is simply the mark: no plate, no chip, the badge's tint behind it. */
.c-anatomy-tagi:has(.mf-logo) { background: none; }
.c-anatomy-tagi .mf-logo { background: none; }
.c-anatomy-tagi.is-draw { background: none; color: var(--accent); }
/* ---------- the spells ----------
   One layer for all of them, over the page and under nothing's control: it takes no pointer, nothing in it is
   in the layout, and it is thrown away the moment the last piece has gone. Every piece is placed from its own
   badge's box, so a spell always happens where the badge is, at any width. */
.c-anatomy-spell { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.c-anatomy-sp {
  position: absolute;
  display: block;
  translate: -50% -50%;
  will-change: translate, opacity;
}
.c-anatomy-sp svg { display: block; width: 100%; height: 100%; }
:root[data-motion="reduced"] .c-anatomy-spell { display: none; }

/* the hands she throws when her film opens: over everything, under nothing's control, and gone in under a second */
.c-anatomy-hello { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.c-anatomy-hello span { position: absolute; display: block; line-height: 1; translate: -50% -50%; will-change: translate, opacity; }
@media (hover: hover) and (pointer: fine) {
  .c-quiet-index-herowords.is-proofed .c-anatomy-proof:hover { box-shadow: inset 0 -1px 0 var(--accent); }
  .c-quiet-index-herowords.is-proofed .c-anatomy-proof.is-tag:hover {
    background: var(--fill-2);
    translate: 0 -1px;
    box-shadow:
      0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent),
      0 6px 14px -6px color-mix(in oklch, var(--ink) 26%, transparent);
  }
}
:root[data-motion="reduced"] .c-quiet-index-herowords.is-proofed .c-anatomy-proof { transition: none; }
/* The preview: placed in the page's own coordinates, so it travels with the word rather than hovering over the
   window. It never takes the pointer, so it can neither cover a word being read nor stop the page scrolling.
   It is not a card. Everything used to arrive inside one — a hairline, a radius, padding, a surface — her own
   film included, which is why they all read as the same object rather than as the things they are. This holds
   no chrome at all: it positions, it fades in, and what it holds carries its own shape and its own shadow. */
.c-anatomy-proofcard {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  translate: 0 12px;
  scale: 0.94;
  rotate: var(--tilt, -1.6deg);
  /* it grows out of the phrase it belongs to: above a word it rises from its own foot, below one it drops from
     its head, so the thing appears to come from the badge rather than to be drawn on top of the page */
  transform-origin: 50% 100%;
  transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out), scale 150ms var(--ease-out);
}
.c-anatomy-proofcard[data-side="under"] { transform-origin: 50% 0; translate: 0 -12px; }
.c-anatomy-proofcard.is-on {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  /* up on a spring that passes rest by about two percent and settles: the sweet part of it */
  transition: opacity 180ms var(--ease-out), translate 420ms var(--spring), scale 420ms var(--spring);
}
/* and once it is up it travels rather than blinking: two badges in one sentence are one preview moving between
   them, on the drawer's easing, with the piece inside crossfading as it goes */
.c-anatomy-proofcard.is-on {
  transition:
    opacity 180ms var(--ease-out),
    translate 420ms var(--spring),
    scale 420ms var(--spring),
    left 380ms var(--ease-drawer),
    top 380ms var(--ease-drawer),
    width 380ms var(--ease-drawer);
}
.c-anatomy-proofcard.is-swap > * { animation: c-anatomy-proofswap 300ms var(--ease-out) both; }
@keyframes c-anatomy-proofswap {
  from { opacity: 0; scale: 0.97; }
  to { opacity: 1; scale: 1; }
}
.c-anatomy-proofcard[data-side="left"] { --tilt: 1.6deg; }
/* at the foot of the view, where there is no margin beside the column to stand in */
.c-anatomy-proofcard[data-side="foot"] { position: fixed; left: 50%; right: auto; top: auto; bottom: 16px; --tilt: -0.8deg; translate: -50% 12px; transform-origin: 50% 100%; }
.c-anatomy-proofcard[data-side="foot"].is-on { translate: -50% 0; }
:root[data-motion="reduced"] .c-anatomy-proofcard[data-side="foot"] { translate: -50% 0; }

/* Her film: a circle of it, her own face playing, resting on the word. No tilt — a circle has none to show — and
   it rises rather than drifts, the way a bubble over a name does. The shadow is soft and low: it is floating a
   little above the paper, not taped to it. */
.c-anatomy-proofcard[data-kind="bubble"] { --tilt: 0deg; translate: 0 6px; }
.c-anatomy-proof-b {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fill);
  box-shadow:
    0 2px 6px color-mix(in oklch, var(--ink) 8%, transparent),
    0 18px 36px -14px color-mix(in oklch, var(--ink) 30%, transparent);
}
.c-anatomy-proof-b video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A screen or a photograph, as the object it is: its own proportions and its own size, lifted off the paper by a
   soft drop shadow alone. No plate behind it, no border, no padding — but the house radius the site gives every
   piece of media, so a preview is still one of her objects and not a cut-out. The bubble is round, because a
   face is. "Not boxed into a card" was the note; sharp corners were not. */
.c-anatomy-proof-m { margin: 0; }
.c-anatomy-proof-m > :is(.mf-work, .mf-media) {
  border-radius: var(--r-l);
  background: none;
  box-shadow:
    0 2px 5px color-mix(in oklch, var(--ink) 8%, transparent),
    0 22px 44px -20px color-mix(in oklch, var(--ink) 34%, transparent);
}

/* In her hero every preview is the same box, whatever it holds: --ph is its height, set with its width, the
   asset covering it and her film a circle of that height inside it. One size, as she asked, so moving along her
   sentence never changes the shape of the thing that answers. (Beside the Approach column each proof is still
   its own size — nothing lines those up, and a small detail shown large there would be a lie about it.) */
.c-anatomy-proofcard:is([data-side="over"], [data-side="under"]) .c-anatomy-proof-m > :is(.mf-work, .mf-media) { height: var(--ph); aspect-ratio: auto; }
.c-anatomy-proofcard:is([data-side="over"], [data-side="under"]) .c-anatomy-proof-b { width: var(--ph); height: var(--ph); margin-inline: auto; }

/* A panel of words rather than a picture — her Ideas page before anything is on it. Words, so it takes the
   same surface a testimonial does. */
.c-anatomy-proof-gh {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  height: var(--ph, auto);
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--r-l);
  background: var(--raised);
  box-shadow:
    0 2px 4px color-mix(in oklch, var(--ink) 10%, transparent),
    0 22px 44px -22px color-mix(in oklch, var(--ink) 32%, transparent);
}
.c-anatomy-proof-gh figcaption { display: flex; align-items: center; gap: 9px; font: var(--l1-font); font-weight: 600; color: var(--ink); }
.c-anatomy-proof-ghm { display: block; flex: none; width: 18px; height: 18px; color: var(--ink); }
.c-anatomy-proof-ghm svg { display: block; width: 100%; height: 100%; }
.c-anatomy-proof-gh p { margin: 0; font: var(--b3-font); color: var(--body); }
.c-anatomy-proof-gh p b { font-weight: 600; color: var(--ink); }
.c-anatomy-proof-ghn { color: var(--muted); }
/* her year, in her own palette: fifty-three columns of seven, a day a square, nothing for a day with nothing on
   it and her coral for her busiest. It is a reading, not a control: no hover, no tooltip, no numbers on it. */
.c-anatomy-proof-gh.is-graph { gap: 10px; }
.c-anatomy-proof-grid { display: flex; gap: 2px; width: 100%; }
.c-anatomy-proof-gw { display: grid; grid-auto-rows: 1fr; gap: 2px; flex: 1 1 0; min-width: 0; }
.c-anatomy-proof-gw i {
  display: block;
  aspect-ratio: 1;
  border-radius: 1.5px;
  background: color-mix(in oklch, var(--accent) calc(var(--v) * 100%), var(--fill));
}

/* The score card behind "production code": one figure, set as large as the box allows, and what it counts under
   it. The same surface as the panel above, because it is the same kind of thing — a small fact, stated. */
.c-anatomy-proof-score {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: center;
  height: var(--ph, auto);
  margin: 0;
  padding: 18px 22px;
  border-radius: var(--r-l);
  background: var(--raised);
  box-shadow:
    0 2px 4px color-mix(in oklch, var(--ink) 10%, transparent),
    0 22px 44px -22px color-mix(in oklch, var(--ink) 32%, transparent);
}
/* Quiet, the way her live site sets a figure: the number in ink at the heading size she already uses for one,
   and what it counts under it in the label register. No accent — a number is not an alarm. */
.c-anatomy-proof-score > b {
  font: var(--h2-font);
  letter-spacing: var(--h2-track);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.c-anatomy-proof-score figcaption { display: grid; gap: 1px; }
.c-anatomy-proof-score figcaption > span:first-child { font: var(--l2-font); color: var(--body); }
.c-anatomy-proof-ss { font: var(--l2-font); color: var(--faint); }

/* A testimonial is words, so it keeps a surface: the message card the collage on Home lays her testimonials out
   in, lifted off the page by the same shadow the collage gives it. */
.c-anatomy-proofcard .c-anatomy-msg {
  box-shadow:
    0 2px 4px color-mix(in oklch, var(--ink) 10%, transparent),
    0 22px 44px -22px color-mix(in oklch, var(--ink) 32%, transparent);
}
.c-anatomy-proofcard .c-anatomy-msg blockquote p { font: var(--b3-font); }
/* motion turned down: it is simply there, with its tilt but no movement */
:root[data-motion="reduced"] .c-anatomy-proofcard { translate: none; transition: opacity 120ms var(--ease-out); }

/* the case column on the canvas reads in these styles */
@media (hover: hover) and (pointer: fine) {
  .c-anatomy-write:hover { color: var(--ink); border-color: var(--line-2); }
  .c-anatomy-cut.is-sheet:hover .c-anatomy-rmore { text-decoration-color: var(--ink); }
}
/* narrower screens: the page labels tighten and the header stays one row. Nothing steps out of it any more —
   her picture is 28px and the three pages are three words, which fit a phone as they are. */
@media (max-width: 1023.98px) {
  .c-anatomy-nav a { padding: 6px 8px; }
}
}

/* reduced motion: the camera jumps, the hover card is simply there */
:root[data-motion="reduced"] .c-anatomy-hc { translate: none; transition: none !important; }
:root[data-motion="reduced"] :is(.c-anatomy-fancard, .c-anatomy-folder-photo > .mf-work) { transition: none !important; animation: none !important; }
:root[data-motion="reduced"] :is(.c-anatomy-navpill > i, .c-anatomy-viewpill) { transition: none; }
:root[data-motion="reduced"] :is(.c-anatomy-who, .c-anatomy-penwrap, .c-anatomy-work, .c-anatomy-cases, .c-anatomy-worklink, .c-anatomy-sect) { transition-duration: 0ms !important; transition-delay: 0ms !important; }
:root[data-motion="reduced"] .c-anatomy-stk-art { transition: none; }

/* ---------- Anatomy · gallery miniature: one 5s loop ---------- */
.t-anatomy-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle, var(--line-2) 0.2cqw, transparent 0.28cqw) 0 0 / 2.4cqw 2.4cqw, var(--paper); }
.t-anatomy-scene > i { position: absolute; display: block; }
.t-anatomy-axis { left: 0; right: 0; top: 55cqw; height: 0.25cqw; background: var(--line-2); }
.t-anatomy-cut { left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); border-radius: 1.2cqw; rotate: var(--r); background: repeating-linear-gradient(135deg, transparent 0 1.2cqw, var(--hatch) 1.2cqw 1.4cqw), var(--fill-2); }
.t-anatomy-cut.is-ui { background: linear-gradient(var(--raised), var(--raised)) 50% 55% / 74% 64% no-repeat, color-mix(in oklch, var(--accent) 14%, var(--paper)); }
.t-anatomy-cut.is-paper { border-radius: 0.6cqw; outline: 1px solid var(--line); background: linear-gradient(var(--line-2), var(--line-2)) 16% 20% / 60% 0.9cqw no-repeat, linear-gradient(var(--line), var(--line)) 16% 34% / 50% 0.9cqw no-repeat, var(--raised); }
.t-anatomy-cut.is-hero { animation: t-anatomy-hero 5s var(--ease-out) infinite; }
.t-anatomy-head { left: 3cqw; top: 3cqw; width: 23cqw; height: 5.6cqw; border-radius: 3cqw; outline: 1px solid var(--line); background: var(--raised); }
.t-anatomy-head::before, .t-anatomy-head::after { content: ""; position: absolute; }
.t-anatomy-head::before { left: 0.6cqw; top: 0.6cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--fill-2); outline: 0.3cqw solid var(--accent); outline-offset: -0.3cqw; }
.t-anatomy-head::after { left: 6.6cqw; top: 2.2cqw; width: 13cqw; height: 1.2cqw; border-radius: 1cqw; background: var(--line-2); }
.t-anatomy-line { left: 63.5cqw; top: 29.5cqw; width: 11cqw; height: 1px; background: var(--ink); transform-origin: 0 50%; rotate: -34deg; scale: 0 1; animation: t-anatomy-line 5s var(--ease-out) infinite; }
.t-anatomy-tag { left: 72.6cqw; top: 23.3cqw; width: 0; height: 0; opacity: 0; animation: t-anatomy-tag 5s var(--ease-out) infinite; }
.t-anatomy-tag::before, .t-anatomy-tag::after { content: ""; position: absolute; border-radius: 1cqw; }
.t-anatomy-tag::before { left: -0.5cqw; top: -0.5cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--ink); }
.t-anatomy-tag::after { left: 1.6cqw; top: -2.2cqw; width: 14cqw; height: 4.6cqw; background: linear-gradient(var(--ink), var(--ink)) 1.2cqw 1cqw / 8cqw 1.1cqw no-repeat, linear-gradient(var(--line-2), var(--line-2)) 1.2cqw 2.7cqw / 11cqw 0.9cqw no-repeat, var(--raised); }
.t-anatomy-cursor { left: 0; top: 0; width: 3cqw; color: var(--ink); animation: t-anatomy-cursor 5s var(--ease-out) infinite; }
.t-anatomy-cursor svg { width: 100%; height: auto; }
@keyframes t-anatomy-cursor {
  0%, 6% { translate: 92cqw 86cqw; }
  24%, 78% { translate: 55cqw 38cqw; }
  96%, 100% { translate: 92cqw 86cqw; }
}
@keyframes t-anatomy-hero {
  0%, 22% { translate: 0 0; }
  28%, 78% { translate: 0 -0.5cqw; }
  86%, 100% { translate: 0 0; }
}
@keyframes t-anatomy-line {
  0%, 26% { scale: 0 1; opacity: 1; }
  36%, 76% { scale: 1 1; opacity: 1; }
  86%, 100% { scale: 1 1; opacity: 0; }
}
@keyframes t-anatomy-tag {
  0%, 34% { opacity: 0; translate: 0 0.6cqw; }
  44%, 76% { opacity: 1; translate: 0 0; }
  86%, 100% { opacity: 0; translate: 0 0; }
}