/* ---------------------------------------------------------------------------
   About.

   A third stylesheet, and the split is the same one the landing's file argues
   for: the sheet's own stylesheet is about ONE material, the landing is about a
   page, and this is about a DIFFERENT page that happens to run on the landing's
   machine. Two pages, two files.

   What is NOT in here is as much of the point as what is. `.hb`, `.hb__col`,
   `.hx`, `.hb__kicker`, `.hb__cta`, `.hb__stage`, `.hb__pin` and the whole
   `.num__*` block are declared in `styles.home.css` and are used here as they
   stand — every one of them is written against custom properties rather than
   against `.home`, and the block below is this section declaring the same set.
   A second implementation of the arch under an `ab__` prefix would be a second
   implementation to tune, and the two would disagree inside a month.

   Where this file DOES have an opinion about one of those shared classes — the
   count, in the tail — the rule is written under `.about` and nowhere else. A
   landing that loses its numbers grid because About wanted a different rule at
   the foot of its own page is the one kind of change this project cannot make.

   Everything in here reads `--flow`: the section's own signed scroll velocity,
   written onto `#about` once a frame by `flow.js`. At rest it is 0 and every
   expression collapses to nothing, which is why there is no "is-moving" class
   anywhere — the deformation IS the velocity.
--------------------------------------------------------------------------- */

/* --- the layer -------------------------------------------------------------
   Same shape the landing and the services column have, for the same reasons: a
   full-bleed ground of its own, faded rather than displayed, and `inert` while
   it is not the thing on screen. */
.about {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  /* The layer owns every gesture. `none` and not `pan-y`: the page inside it is
     a transform, so letting the browser scroll anything here would scroll the
     document behind the sheet instead. */
  touch-action: none;
  overscroll-behavior: contain;
  transition:
    opacity 0.5s var(--ease-out),
    visibility 0s linear 0.5s;

  --flow: 0;
  --flow-abs: 0;
  /* The fallback until the layer has measured itself. `--dvh` is the window
     as it is RIGHT NOW, written onto <html> by `core/device.js` on the frame
     the address bar moves; `100vh` is the window as it would be with the
     browser chrome collapsed, which on a phone is a hundred-odd points taller
     than the layer actually is. Two frames of a page laid out against the wrong
     height is one visible jump on load. */
  --vh: var(--dvh, 100vh);

  /* The type scale, and it is the landing's — the two sections are one voice
     read at one distance, and a second scale would be the studio speaking in
     two sizes about itself. */
  --t-display: clamp(2.8rem, 7.6vw, 8.4rem);
  --t-title: clamp(1.85rem, 4.4vw, 4.1rem);
  --t-lead: clamp(1.05rem, 1.55vw, 1.6rem);
  --t-body: clamp(0.95rem, 1.05vw, 1.15rem);
  --gap: clamp(48px, 9vh, 130px);
  --col: min(1320px, 100% - var(--pad) * 2);

  /* `--face-display` and `--line-soft` USED TO BE DECLARED HERE, and they are
     in `:root` in styles.css now — same stack, same 17%, so nothing on this
     page renders differently for the move.

     They went up because they stopped being this page's business. The landing
     sets its count in the display face off the same cell rule this page does;
     two copies of a shared weight is two copies to keep in step, and the one
     that gets missed is the one nobody is looking at. A value only two pages
     share is not a page's token. */

  /* How far a word is thrown by the arch, at full velocity and at the edge of
     its line. In em, so a headline the size of a building bends by the same
     proportion a caption does. */
  --arch: 0.34em;
}

body.is-about .about {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* One transform on one element. Everything on the page is inside it. */
.about__track {
  position: relative;
  width: 100%;
  will-change: transform;
  backface-visibility: hidden;
}

/* Where you are, down the right edge. The same two pixels the column and the
   landing use, because it is the same object saying the same thing. */
.about__rail {
  position: absolute;
  top: 22vh;
  right: var(--pad-edge);
  bottom: 22vh;
  width: var(--hair);
  background: currentColor;
  opacity: 0.14;
  z-index: 4;
  pointer-events: none;
}

.about__rail > i {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform-origin: 50% 0;
  transform: scaleY(0);
  opacity: 0.9;
}

/* --- the shell, while About is up -------------------------------------------
   The same trade the landing and the column make: the readings OF the ribbon
   step aside, the shell stays. Walking into a section is not leaving the site,
   and the way to the next one has to be on screen in this one. */
body.is-about .creed,
body.is-about .lockup__slot,
body.is-about .gauge,
body.is-about .plates,
body.is-about .probe,
body.is-about .tag {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out);
}

/* The shell and the panes it is read through — same argument as the landing's,
   and the same rule, including which layer is NOT in it. See styles.home.css. */
body.is-about .chrome,
body.is-about .crown,
body.is-about .chromeglass {
  z-index: 6;
}

/* --- THE ARC ---------------------------------------------------------------
   Anything with `data-arc` bends with the page.

   `--u` is written per element by `section.js` after layout: the element's
   centre as a fraction of the width it was laid out in. Here that is squared
   around the middle and multiplied by `--flow`, the page's own signed
   velocity — so a row of things sags in the middle and whips at its ends while
   the page is moving, and lies flat the instant it stops.

   Same arithmetic as `.hx__w` on every headline and as the arch in three
   fragment shaders on this site. It is not a stack of effects; it is one
   deformation the whole page is inside.

   The amplitude is in VH and not em, and that is not a preference: em resolves
   against the element.s own font-size, so the same declaration threw a caption
   twelve pixels and a figure set at seventeen rem two hundred and sixty. The
   arc is a property of the PAGE — how hard this screen is being pushed — so it
   is measured in the screen.

   `--ry` is carried through, so an element can be both arced and revealed
   without two rules fighting over one `transform` — which is the oldest bug in
   this kind of page: whichever cascades last wins outright and the other one
   silently does nothing. */
[data-arc] {
  --d: calc(var(--u, 0.5) * 2 - 1);
  --bow: calc(var(--d) * var(--d) * 4 - 1.1);
  transform: translate3d(0, calc(var(--ry, 0px) + var(--flow) * var(--bow) * var(--arc-amp, 1.1vh)), 0);
  will-change: transform;
}

/* THE LENS. The last thing the lookbook does with its velocity, and the piece
   this page borrowed the arc from: at speed the whole frame narrows a little,
   as if the screen were being seen through something with thickness. Two per
   cent, on the full-bleed blocks only, and it is the difference between a page
   that moves and a page that is being moved.

   In `scale` and not in `transform`: the pin already writes a transform on the
   block s child and the reveal writes one on its contents, and two rules over
   one transform is the oldest bug in this kind of page — whichever cascades
   last wins outright and the other silently does nothing. `scale`, `rotate` and
   `translate` are separate properties for exactly this. */
.about .hb.is-break {
  scale: calc(1 - var(--flow-abs, 0) * 0.02) 1;
}

/* --- 01 WHO — two mirrored panels, each carrying a photograph ---------------
   It was two rows of a table. The panel is the unit now: each takes most of a
   screen and the SECOND ONE IS MIRRORED — 01 reads left to right, 02 right to
   left. The fold between them is the only symmetry on the page, and it is the
   one thing the block is about.

   And the figure is no longer standing in empty space: it is cut out of a
   photograph. See `.pair__code` below — one image, one glyph, no third asset. */
.pair__title {
  font-size: var(--t-title);
  max-width: 15ch;
}

.hb--panels {
  display: grid;
  gap: clamp(60px, 12vh, 140px);
}

.pair__panel {
  width: var(--col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  opacity: 0;
  --ry: 34px;
  transition:
    opacity 1s var(--ease-out),
    --ry 1s var(--ease-out);
}

.hb.is-in .pair__panel { opacity: 1; --ry: 0px; }
.hb.is-in .pair__panel.is-flip { transition-delay: 0.12s; }

/* The mirror. `direction` and not a second set of rules: one declaration flips
   the column order, the text alignment and the list bullets in one go, and the
   two panels stay ONE component rather than becoming two that will drift. */
.pair__panel.is-flip {
  direction: rtl;
}
.pair__panel.is-flip > * { direction: ltr; }
.pair__panel.is-flip .pair__body { text-align: right; }
.pair__panel.is-flip .pair__role { justify-content: flex-end; }
.pair__panel.is-flip .pair__tags { justify-content: flex-end; }
.pair__panel.is-flip .pair__line { margin-left: auto; }

/* The plate: a photograph with the figure cut out of it.

   `isolation` is load-bearing. `mix-blend-mode` on the figure blends against
   whatever stacking context it finds, and without this that context is the
   whole section — so the number would be differencing itself against the page's
   ground, the block below it and, on a bad frame, the shader four blocks up.
   Isolated here, it blends against exactly one thing: its own photograph. */
.pair__plate {
  position: relative;
  isolation: isolate;
  --arc-amp: 1.6vh;
}

.pair__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 7%, transparent);
  /* The wipe. `clip-path` and not a scale: the picture must not move while it
     is being uncovered, or the parallax below is fighting an entrance. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out) 0.08s;
}

.hb.is-in .pair__shot { clip-path: inset(0 0 0 0); }

/* THE PICTURE KEEPS ITS COLOUR.

   It used to arrive at `grayscale(1)`, on the argument that one bit is what
   this sheet is made of and a colour plate dropped into a monochrome page is a
   plate from a different page. The frame is still monochrome and still one bit
   — the rule, the type, the ground, the knocked-out figure over it. What is
   inside the frame is the WORK, and the work is the one thing here that is
   allowed to be its own colour. A hair of contrast is all it is held off the
   ground with; the forge at the head of this page now prints its four the same
   way.

   The picture is also inside the page's own deformation: it is offset by
   `--flow`, the section's signed velocity, exactly like every headline word and
   every fragment shader on the site. `scale` covers the offset at both ends. */
.pair__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.04);
  transform: translate3d(0, calc(var(--flow) * 2.6vh), 0) scale(1.1);
  will-change: transform;
}

/* The figure, at the size of the plate, KNOCKED OUT of it.

   White, and `difference`: over ink it comes out paper, over paper it comes out
   ink, so the digit is legible on every part of every photograph without a
   scrim and without a second colour. Hollow rather than solid for the reason it
   always was — a solid number that large is a second object competing with the
   name beside it — but now the counters are full of the picture. */
.pair__code {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--face-display);
  font-size: clamp(6rem, 17vw, 15rem);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.6px #ffffff;
  mix-blend-mode: difference;
  user-select: none;
  pointer-events: none;
}

.pair__body {
  display: grid;
  gap: clamp(12px, 1.6vh, 20px);
  justify-items: start;
}

.pair__panel.is-flip .pair__body { justify-items: end; }

.pair__name {
  font-family: var(--face-display);
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  --arc-amp: 1.5vh;
}

.pair__role {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  --arc-amp: 1.1vh;
}

.pair__rule {
  display: block;
  width: clamp(28px, 4vw, 64px);
  height: var(--hair);
  background: currentColor;
}

.pair__line {
  margin: 0;
  max-width: 42ch;
  font-size: var(--t-lead);
  line-height: 1.45;
  opacity: 0.78;
  --arc-amp: 0.9vh;
}

.pair__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

/* THE CHIPS, and the line around them is the whole of what was wrong with them.

   They were a full-strength hairline in `currentColor` with the whole chip then
   faded to 55% — so the ring printed at exactly the same weight as the rules
   that structure the page, and a row of six of them read as a row of six boxes
   rather than as three words with a shape around each.

   The ring is now the page's soft line and the WORD is what came back up. Less
   line, more type: the chip is legible and the boxes stopped shouting. */
.pair__tags li {
  padding: 0.55em 1em;
  border: var(--hair) solid var(--line-soft);
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.74;
  --arc-amp: 0.7vh;
}

/* --- 02 HOW — four moves about a centre line -------------------------------
   NOT a staircase. It was one: every row stepped further across the page than
   the one above, on the theory that the shape of the list would say "these
   happen in this order" before a word was read. What it said was "staircase" —
   the indent fought the column the rest of the page is set in, and by the
   fourth step the paragraph had a third of its measure left.

   The rhythm is the one this page already has instead: the moves ALTERNATE
   about a centre line, which is the same mirror the two panels of WHO turn on.
   A thread is drawn down that centre as the block arrives and the four figures
   hang off it on alternate sides, so the sequence reads as a single object
   being followed down rather than as four things that happen to be numbered.

   Every row is the same width as every other. That is the whole fix. */
.habit__title {
  font-size: var(--t-title);
  max-width: 16ch;
}

.habit__list {
  position: relative;
  width: var(--col);
  margin: clamp(44px, 8vh, 96px) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
}

/* The thread. Drawn once, downward, when the block is first reached — the four
   moves are hung on it, so it has to arrive before they do. */
.habit__thread {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--hair);
  background: currentColor;
  opacity: 0.18;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.6s var(--ease-out) 0.05s;
}

.hb.is-in .habit__thread { transform: scaleY(1); }

.habit__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 72px);
  padding: clamp(22px, 3.6vh, 48px) 0;
  opacity: 0;
  --ry: 26px;
  transition:
    opacity 0.9s var(--ease-out),
    --ry 0.9s var(--ease-out);
}

.hb.is-in .habit__row { opacity: 1; --ry: 0px; }
.hb.is-in .habit__row:nth-child(3) { transition-delay: 0.09s; }
.hb.is-in .habit__row:nth-child(4) { transition-delay: 0.18s; }
.hb.is-in .habit__row:nth-child(5) { transition-delay: 0.27s; }

/* The mirror, and it is the panels' own declaration. In `rtl` the first column
   is the right-hand one and `end` resolves to its left edge — so the figure
   hugs the thread from whichever side its row is on, without a single rule
   naming a side. */
.habit__row.is-flip { direction: rtl; }
.habit__row.is-flip > * { direction: ltr; }
.habit__row.is-flip .habit__body { text-align: right; }
.habit__row.is-flip .habit__line { margin-left: auto; }

/* Hollow, because a solid figure at this size is a second object competing with
   the name beside it; an outline is a frame around air and the name reads
   through it. */
.habit__code {
  justify-self: end;
  font-family: var(--face-display);
  font-size: clamp(3.2rem, 8.5vw, 7.4rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: 0.44;
  padding: 0 clamp(14px, 2.4vw, 40px);
  --arc-amp: 1.9vh;
  user-select: none;
}

.habit__body {
  display: grid;
  gap: 0.55em;
  padding: 0 clamp(14px, 2.4vw, 40px);
}

.habit__name {
  font-family: var(--face-display);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  --arc-amp: 1.3vh;
}

.habit__line {
  margin: 0;
  max-width: 44ch;
  font-size: var(--t-body);
  line-height: 1.5;
  opacity: 0.68;
  --arc-amp: 0.85vh;
}

/* Where the row meets the thread. A filled disc in the ground with a hairline
   around it, so the thread reads as passing BEHIND the move rather than being
   interrupted by it. */
.habit__node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 var(--hair) currentColor;
  opacity: 0.55;
}

/* --- THE LANE, and it is what makes the page one object -------------------
   Everything after the hero was five blocks in a row, each with its own
   entrance, its own hairline and its own reason to be there. Five of those in
   sequence is the page saying "and now, something else" five times, and a
   reader cannot tell an argument from a stack that way.

   ONE hairline runs down the left margin from the first block after the hero to
   the last pixel of the page, and every block hangs its name on it. It is the
   lane the LATTICE is already drawing its own rotated band labels in — at about
   the same 34px, which is not a coincidence and is checked in the note in
   `about/blocks.js` — so the canvas takes the lane over for three viewports and
   hands it back. The line never breaks. That is the whole device.

   Two more declarations follow from it: the join rule between two lane blocks
   is off, and two lane blocks that are both columns of type sit closer together
   than a block and a break do. */

/* NO SEAM. The hero is still separated from the page by that hairline. Nothing
   after it is. */
.about .hb--lane + .hb--lane::before {
  display: none;
}

/* And they close up. `.hb.is-clean` pays a full 15vh at both ends, which is the
   right distance between two blocks that are arguing different things and much
   too far between WHO and HOW, which are one voice describing itself twice. */
.about .hb--lane.is-clean + .hb--lane.is-clean {
  padding-top: clamp(30px, 6vh, 80px);
}

.lane__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pad-edge);
  width: 1.6em;
  z-index: 4;
  font-size: var(--t-micro);
  color: var(--ink);
  pointer-events: none;
}

.lane__rule {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--hair);
  background: currentColor;
  opacity: 0.16;
}

/* Set on its end, reading UPWARD — the same direction the lattice rotates its
   own band labels, so the lane never changes voice. `writing-mode` sets the
   glyphs on their side and the half turn is what makes them read from the foot
   of the block to its head. */
.lane__mark {
  position: absolute;
  left: 50%;
  top: clamp(28px, 7vh, 96px);
  translate: -50% 0;
  rotate: 180deg;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* THE LANE NEEDS A MARGIN TO LIVE IN, and below about 1440px this page does not
   have one.

   `--col` is `min(1320px, 100% - var(--pad) * 2)` and it is centred, so the
   margin either side is `(100vw - col) / 2`. Under 1320 + 2·pad that collapses
   to `--pad` itself, which tops out at 40px — and the lane wants about 44. At
   900px the rule was landing at 13–31px with the column starting at 22: a
   hairline drawn straight through the paragraph.

   Hidden rather than squeezed. A device that only works when the page is wide
   enough for it is a device; a device that overlaps the type at one width is a
   bug that only some people see. The lattice's own labels are drawn in the
   CANVAS's margin, which is a fraction of its own width, so they are never in
   this position and this rule does not apply to them. */
@media (max-width: 1439px) {
  .lane__spine { display: none; }
}

/* --- 03 the lattice --------------------------------------------------------
   The grid is a texture and it is the whole block. Nothing is laid over it: the
   plate already prints its own labels, its own rules and its own paragraphs,
   and a DOM headline on top would be the one piece of type on screen that the
   arch could not reach. */
.hb--lattice {
  background: var(--paper);
}

.hb--lattice .hb__stage {
  z-index: 1;
}

/* --- 04 the count ----------------------------------------------------------
   The second block of the suite, and it opens without an entrance of its own.

   Every rule in here is written under `.about`, and that is not decoration:
   `.num__grid`, `.num__cell`, `.num__value` and `.num__label` are the LANDING's
   classes, declared in `styles.home.css` and used by its own numbers block. A
   bare `.num__grid { border-top: none }` typed in this file to make the tail
   flow would silently take the rule off the landing as well.

   THREE RULES LEFT THIS BLOCK, and none of them was deleted — they were moved
   UP, into the base in styles.home.css. The box going, the hairline per figure
   instead, the figures in the display face: those were this page's fixes for a
   treatment the landing had exactly the same problem with, and the landing has
   them now too. Which means the undoing goes with the thing it was undoing —
   there is no lid on `.num__grid` any more, so nothing here has to type
   `border-top: 0` to take one off.

   What is left below is what is genuinely About's: the `[ FIG. 01 ]` filing its
   lattice sets, and the arc. */
.about .hb--numbers {
  padding-top: clamp(44px, 8vh, 104px);
  padding-bottom: clamp(70px, 12vh, 170px);
}

/* The lattice's own filing language, continued: the plates in its film strip
   are captioned `FIG. 01`, and so is every figure in the count. */
.about .num__fig {
  margin: 0 0 clamp(16px, 2.6vh, 32px);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.42;
}

/* The face and the weight are the base's now. This is the amplitude of the
   bend, and the arc engine that reads it runs on this page only. */
.about .num__value {
  --arc-amp: 1.6vh;
}

/* --- 05 the foot — the field, with the claim printed on it -----------------
   Full bleed, the whole screen. The block that used to be here repeated the
   navigation in four different sizes; this says what the studio is by being a
   surface that will not stop making decisions.

   `.hb__stage` is `inset: 0` already, so the component takes the block exactly
   and the block takes the screen. */
.hb--mosaic {
  min-height: var(--vh);
  overflow: hidden;
  /* Same reason as the plate in WHO: the statement below blends, and a blend
     with nothing isolating it reaches the whole section. */
  isolation: isolate;
}

/* TWO ROWS NOW — the claim, and the door under it — and they have to read as
   ONE object standing in the middle of the screen.

   `.hb.is-break` is `display: grid; align-items: center`, and while there was
   only one row those two words did the whole job: the single track stretched to
   the block and the item was centred inside it. A second track turns that into
   two half-screens with one thing hanging in the middle of each. `align-content`
   is the axis that was never asked a question here — it packs the tracks to
   their content and centres the pair of them, which is what `align-items` looked
   like it was doing all along. */
.about .hb--mosaic {
  align-content: center;
  /* AND THE GAP IS LARGE, on purpose and by measurement rather than by taste.

     The claim is knocked out of the field and the door stands in a clearing cut
     out of the same field, and those two effects cannot touch: the clearing
     reaches well past its own copy on every side — it has to, or it has an edge
     — and anywhere it laps over the claim it lays a veil across type that is
     supposed to be inverting against the marks underneath. So the distance
     between them is the clearing's own top reach plus room to spare, which at a
     720-pixel viewport is about ninety pixels and scales from there.

     It also happens to be right for reading. They are two sentences, not a
     heading and a subheading. */
  row-gap: clamp(52px, 12.5vh, 118px);
}

.hb--mosaic .hb__stage {
  /* It answers the pointer — that is most of why it is here — so it is the one
     stage on the page that is not inert. */
  pointer-events: auto;
}

.hb--mosaic .hb__stage > * {
  display: block;
  width: 100%;
  height: 100%;
}

/* THE CLAIM, printed on the field.

   It had a screen of its own: eighty per cent of a viewport of nothing with two
   lines in the middle of it, landing between the count and the field like a
   third guest at a table set for two. It is knocked out of the field now —
   `difference` against white, so where the type crosses ink it comes out paper
   and where it crosses paper it comes out ink. That is what a knockout is, and
   it is what a `<div>` sitting on top of a canvas otherwise cannot do.

   `pointer-events` off: the field underneath is the one thing on this page that
   answers the pointer, and a sentence lying across it must not eat the gesture. */
.about .hb--mosaic .statement__inner {
  position: relative;
  z-index: 2;
  width: var(--col);
  margin: 0 auto;
  color: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.statement__title {
  font-size: clamp(2rem, 5.4vw, 5.6rem);
  max-width: 20ch;
}

/* --- THE DOOR --------------------------------------------------------------
   The field was the last screen of the page and it had no way off it. The claim
   is printed on it, the surface answers the pointer, and then the page simply
   ended — the address existed but it was in `sr-only`, which is to say it was
   for crawlers. So the claim gets a door under it.

   NOTHING IN HERE DRAWS THE DOOR. `hb__kicker`, `hb__body`, `cta__row`,
   `hb__act`, `.xcta` and `cta__mail` are the six classes `.hb--cta` ends the
   LANDING with, they are declared in `styles.home.css`, and the door is those
   six in that order — see `door()` in `about/blocks.js`. Not a page that looks
   like the other page: the same ending, read from here. What this file writes
   is only what is true of this ONE block and of nowhere else: the clearing, the
   two margins the field asks for that a column of reading does not, the
   entrance keyed to this block's name, and which parts of it are allowed to
   take the pointer. */
.about .hb--mosaic .door {
  position: relative;
  /* Over the field. It is also a stacking context, which is the point: the haze
     below is drawn at `z-index: -1` and has to land behind the door and still
     in front of the canvas, and only a context of its own can hold both of
     those at once. */
  z-index: 3;
  width: var(--col);
  margin: 0 auto;
  /* INERT. The field is the one thing on this page that answers the pointer and
     a column-wide box laid across it eats the gesture everywhere the door is
     not — the same trap `.hb__act` documents on the landing's pinned blocks,
     except here the box would be the full measure. The two controls come back
     on at the foot of this section and nothing else does. */
  pointer-events: none;
}

.about .hb--mosaic .door__inner {
  position: relative;
  /* As wide as the copy inside it and no wider. The clearing is drawn off this
     box, and a box the width of the column would be a hole the width of the
     column. */
  width: fit-content;
  max-width: 100%;
}

/* THE CLEARING.

   The claim above is KNOCKED OUT of the field — `difference`, so it comes out
   paper over ink and ink over paper. The door cannot do that: a liquid-metal
   rim inside a difference blend is not a rim, it is a mistake, and a mail
   address inverting letter by letter as the marks move under it is unreadable
   in the plain sense. So the surface has to go quiet instead.

   AND IT HAS TO DO THAT WITHOUT AN EDGE. A card here would be the one rectangle
   on a page that has spent five blocks refusing to draw one, and it would read
   as a thing stuck ON the field rather than a thing the field made room for.

   So: an ellipse of the sheet's own paper, solid across every glyph and gone
   before it reaches anything else, sitting a long way outside the copy on every
   side. The marks come back through the last quarter of it. The field never
   stops, it thins — and closes again past the door — which is the difference
   between a clearing in a surface and a plate laid on top of one.

   THE CENTRE IS AT 50% AND THE SIDES ARE EQUAL, and that is not tidiness, it is
   the only arrangement in which this shape has no edge at any width.

   A radial gradient sized `farthest-corner` — the default — takes its radii from
   the corner furthest from its centre. Push the centre off to one side and the
   NEAR side of the box is reached at less than one radius, which means the
   colour there is still solid when the box ends: the paint stops dead in a
   straight vertical line. Off-centre at 46% that line came out at about four
   tenths, and it was invisible only because the near side happened to be past
   the edge of the screen on the widths it was drawn at. Centre it and every
   edge of the box is exactly one radius away, so the colour arrives at zero on
   its own and the box is where nothing is left rather than where the paint was
   cut.

   The left side still runs off the screen on the common widths, because the
   door hangs on the column's left edge and the margin outside that edge is
   thirty-one pixels on a 1280. That is FINE, and it is a different thing from
   an edge: a gradient clipped by the side of the screen is a gradient that
   leaves the frame, and the lane's hairline crosses it at `z-index: 4` so the
   margin keeps its structure either way. On a screen wide enough for the column
   to sit in the middle of it, the ellipse simply closes on both sides and the
   field comes back — which is the version this is drawn for.

   `--paper`, so it turns over with the dial like every other ground here.

   --- AND IT IS A PLATE NOW, NOT AN ELLIPSE ---------------------------------
   Everything above is the argument for the soft version and it is kept, because
   it is still the right argument about a field of marks: a gradient thins the
   surface instead of covering it, and a surface that thins is a clearing rather
   than a card.

   It is the wrong argument about THIS field. The mosaic is one bit and it
   paints SOLID BLOCKS — see the `BLOCKS` note in `vs-anim-acid-mosaic.js`: four
   rectangles up to half a viewport across, hard-cornered, snapped to the cell
   grid, and half of them pure ink. An ellipse of `--paper` faded to nothing
   over a field of small marks is invisible, which is what it was drawn for; the
   same ellipse over one of those white blocks is a wide grey smear with no edge
   anywhere on it, and the smear moves and re-deals every few seconds. The shape
   was not reading as "the field made room here". It was reading as a stain.

   So the clearing keeps its job and drops its softness: `--paper`, flat, to a
   hard edge, tight enough to the copy that it is legibly a plate the door is
   set on rather than a hole punched in the page. A rectangle IS the thing this
   page has spent five blocks refusing to draw — and a rectangle is also the
   only shape that stays itself over a ground made of rectangles. One edge,
   stated, beats an edge that appears whenever a block lands under it.

   The bleed comes in with the softness. The old inset ran to a fifth of the
   viewport on each side because a gradient needs that much room to reach zero;
   a flat plate needs only the air around the type, so it is now the ordinary
   padding of a panel and the field closes a hand's width from the words. */
.about .hb--mosaic .door__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset:
    clamp(-44px, -4.4vh, -26px)
    clamp(-72px, -5vw, -34px)
    clamp(-52px, -5.4vh, -30px);
  background: var(--paper);
  pointer-events: none;
}

/* The kicker's own bottom margin is written for a block that opens with one and
   then sets a headline; here it is followed immediately by a line of body, and
   the two margins together are a gap nobody asked for. The line below owns the
   distance. */
.about .hb--mosaic .hb__kicker {
  margin-bottom: 0;
}

/* `.hb__body` is written for a column of reading and it is 62ch wide. This is a
   promise being read in a doorway while something moves behind it. */
.about .hb--mosaic .door__note {
  max-width: 32ch;
  margin-top: clamp(14px, 2.2vh, 26px);
  line-height: 1.5;
}

/* The row carries its own entrance and the landing keys it to `.hb--cta`. Same
   row, same delay, this block's name. */
.about .hb--mosaic.is-in .cta__row {
  opacity: 1;
  --ry: 0px;
}

/* And the two live things inside the inert wrapper. Everything between them is
   still field. */
.about .hb--mosaic .door .xcta,
.about .hb--mosaic .door .cta__mail {
  pointer-events: auto;
}

/* --- narrow ----------------------------------------------------------------- */

@media (max-width: 860px) {
  .about {
    --arch: 0.24em;
  }

  /* One column, and the mirror goes with it: a panel flipped inside a single
     column is a panel whose number has swapped sides for no reason the reader
     can see. */
  .pair__panel,
  .pair__panel.is-flip {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 22px;
  }

  .pair__panel.is-flip .pair__body,
  .pair__panel.is-flip .pair__role,
  .pair__panel.is-flip .pair__tags {
    text-align: left;
    justify-content: flex-start;
  }

  .pair__panel.is-flip .pair__body { justify-items: start; }
  .pair__panel.is-flip .pair__line { margin-left: 0; }

  .pair__shot { aspect-ratio: 5 / 4; }
  .pair__code { font-size: clamp(5rem, 26vw, 10rem); }

  /* The thread goes to the left edge and the moves stop alternating: two
     columns of a hundred and sixty pixels each is not a mirror, it is a
     collision. */
  .habit__row,
  .habit__row.is-flip {
    grid-template-columns: 1fr;
    direction: ltr;
    row-gap: 8px;
    padding-left: clamp(28px, 9vw, 56px);
  }

  .habit__row.is-flip .habit__body { text-align: left; }
  .habit__row.is-flip .habit__line { margin-left: 0; }

  .habit__code {
    justify-self: start;
    padding: 0;
  }

  .habit__body { padding: 0; }
  .habit__thread { left: 0; }
  .habit__node { left: 0; }

  /* THE DOOR, on a screen the door is nearly as wide as.

     The pair sits closer and the line breaks sooner, and those are the same
     argument at a smaller measure. THE CLEARING IS NOT.

     Up there it is an ellipse: the copy is three hundred and thirty pixels of a
     twelve-hundred-pixel column, so the shape has room to be a shape and the
     field closes again to the right of it. Down here the copy is two hundred
     and seventy pixels of a three-hundred-and-seventy-five-pixel screen. An
     ellipse drawn around that either fails to cover its own corners — the
     kicker comes out at zero and the address at a quarter, which is a door
     printed on noise — or it is bigger than the viewport, which is not an
     ellipse, it is a page with the lights off.

     So the clearing changes SHAPE rather than size: full bleed, and the fade is
     vertical only. The field goes quiet in a band across the foot of the screen
     and comes back above and below it. No horizontal edge exists to be soft,
     because the two ends of it are the two ends of the screen — which is the
     same reason the desktop one is allowed to leave at full strength on the
     left.

     THE FADE GOES, for the reason written over the desktop rule: a soft top and
     bottom over a field that paints hard white blocks is a grey smear, not a
     band of quiet. What is left is exactly the shape the paragraph above argues
     for and nothing else — full bleed sideways, so the only two edges are the
     two ends of the screen, and a stated horizontal edge top and bottom. It is
     the same plate as the desktop one, run to both margins because at this
     measure there is no room beside it for the field to close in. */
  .about .hb--mosaic { row-gap: clamp(34px, 7vh, 62px); }
  .about .hb--mosaic .door__note { max-width: 26ch; }
  .about .hb--mosaic .door__inner::before {
    inset: clamp(-40px, -4vh, -24px) -50vw clamp(-58px, -6.4vh, -34px);
    background: var(--paper);
  }
}

/* --- no motion ---------------------------------------------------------------
   The entrances are the only thing removed. Everything on the page is still
   there and still in order — a reader who has asked for no motion is asking for
   no MOTION, not for a section with its content withheld.

   The arc goes too, and it is the one that matters: it is driven by `--flow`,
   which reduced motion has already pinned to zero, but the per-frame transform
   on forty elements is still worth not paying for. */
@media (prefers-reduced-motion: reduce) {
  .pair__panel,
  .habit__row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-arc] { transform: none; }

  .pair__shot { clip-path: none; transition: none; }
  .pair__shot img { transform: none; }
  .habit__thread { transform: scaleY(1); transition: none; }
}

/* --- 00 THE HERO — the questions, on a clock -------------------------------
   THIS FILE ONLY HAS THE DIFFERENCE. The whole of the deck — the head band,
   the room, the cards, the ledger, the rail, the two arrows — is declared in
   `styles.home.css` under `.faq__*`, unprefixed, and every stylesheet in this
   project is loaded on every page. The note at the head of that block says why
   it stayed there when the markup came here.

   What is below is the four things being a HERO changed, and nothing else:

     the block   it is a screen now, not a section in the middle of one
     the room    a fifth taller, because it is the first thing anybody sees
     the clock   the deck turns itself, so it has to SAY how long
     the liquid  the turn is the page's one piece of real spectacle

   Everything here hangs off `.hb--ask`. `.hb--faq` is on the same element and
   is what the landing's stylesheet is written against — see `ask.js` for why
   there are two names on one block.
--------------------------------------------------------------------------- */

/* --- the block ------------------------------------------------------------
   `.hb.is-break` already makes it a screen: `min-height: var(--vh)`, a grid
   with one centred row, and `overflow: hidden`. What it does not give is
   BREATHING ROOM at the two ends, because every other break on this site is a
   full-bleed canvas and this one is a column of type standing in the middle of
   a viewport. The padding is asymmetric on purpose: the head band is the first
   thing on the page and wants air over it, and the foot is a hairline sentence
   that wants to sit close to the block it belongs to. */
.about .hb--ask {
  padding: clamp(64px, 11vh, 132px) 0 clamp(40px, 6vh, 84px);
  align-items: center;
}

/* THE ARCH IS TURNED UP, and only here. `--arch` is how far a word is thrown
   off the baseline by the page's own velocity, and the landing sets it low
   because the questions were the fourth block down and had eight screens of
   arching type above them to agree with. This is the FIRST screen: the arch is
   the page introducing the deformation everything under it runs on, and an
   introduction is allowed to be legible. */
.about .hb--ask .faq__title { --arch: 0.4em; }
.about .hb--ask .faq__q { --arch: 0.3em; }

/* --- the head band, unruled -------------------------------------------------
   THREE LINES COME OUT OF THE BAND HERE AND NOWHERE ELSE.

   On the landing the deck is the fourth block down, arriving under eight
   screens of hairlines: the rule beneath its head band is one more course in a
   wall that is already being read as a wall, and the two rules through the
   arrows are what tells a reader scrolling past at speed that the chevrons are
   controls rather than punctuation.

   This is the FIRST screen of the page. Nothing has been established yet for a
   hairline to agree with, so the same three rules read as scaffolding around a
   headline — a box drawn under the title, and two dashes flanking a count that
   is already the clearest thing in the band. What is left is what the band is:
   a sentence, a count, and two chevrons.

   The room's own edge, a hundred pixels below, is the line this part of the
   page is drawn with. Two lines that close the same gap are one line and a
   shadow of it. */
.about .hb--ask .faq__head::after { display: none; }

.about .hb--ask .faq__arrow-rule { display: none; }

/* With the rule gone the control is the chevron, so the box is the chevron's
   box and not a rule's. Still over the 24px a finger needs, and the pair now
   sits at the distance the count sits from them rather than two dashes away. */
.about .hb--ask .faq__arrow {
  width: clamp(26px, 2.4vw, 34px);
  opacity: 0.62;
}

/* The two states the rule above would otherwise eat. Raising a selector to
   three classes puts it over `.faq__arrow:hover` and `.faq__arrow:disabled`,
   which are two classes each — so a resting opacity declared here and nowhere
   else is a control that no longer answers a pointer and no longer says it has
   run out of cards. Same specificity, restated. */
.about .hb--ask .faq__arrow:hover,
.about .hb--ask .faq__arrow:focus-visible { opacity: 1; }
.about .hb--ask .faq__arrow:disabled { opacity: 0.16; }

/* --- and the note, at a weight a reader can hold ---------------------------
   0.4 IS A SCROLL VALUE, NOT A RESTING ONE.

   The landing spends the note's ink on being furniture: it goes past under
   motion, at the far end of a band whose headline is melting, and a sentence
   at more than a third would compete with the thing it is annotating. Here the
   block STOPS — it is a hero, the reader arrives on it and stays — and the one
   sentence in the band is at the size of a label with nothing moving behind
   it. Black at 0.4 on this ground is grey 153, which is 2.9:1: a sentence set
   below the floor for text it is asking to be read.

   0.62 is grey 97 and 5.6:1, and the count beside it keeps its own hierarchy
   because it was never fighting the note — it is bigger, tracked out, and the
   only tabular thing on the screen. The `/ 03` comes up with it for the same
   reason: a denominator at 0.3 is a number the reader has to lean in to check.

   The entrance is untouched. What arrives is still a fade and a rise on the
   note's own clock — it simply lands somewhere legible. */
.about .hb--ask.hb.is-in .faq__note { opacity: 0.62; }
.about .hb--ask .faq__count-of { opacity: 0.45; }


/* --- the room, a fifth taller ---------------------------------------------
   `--room` is the height of the photograph the whole block stands on, and it
   is one number with three readers — the room, the ask band inside every card,
   and the mark in the corner. Multiplying it here moves all three at once,
   which is the entire reason it was a custom property on the deck rather than
   a height on the picture.

   TWENTY PER CENT, on every term of the clamp. Scaling only the middle term
   would leave a phone and a very wide desktop at exactly the height they were
   and grow only the screens in between, which is the failure mode of every
   clamp that has ever been "made bigger" — the change would be invisible on
   the two machines most likely to be looking. 210 / 34 / 400 becomes
   252 / 40.8 / 480, and the band goes from about 3.4:1 to about 2.8:1: still a
   letterbox, and now a letterbox with a face in it. See `ASK_SHOTS` in
   `media.js` for where each of the three plates is cut. */
.about .hb--ask .faq__deck {
  --room: clamp(252px, 40.8vh, 480px);
  /* AND THE TURN IS SLOWER AND HEAVIER THAN THE LANDING'S. An expo-out rather
     than the house ease: it leaves fast, arrives from a long way off and
     settles without a bounce, which is the only curve that reads as WEIGHT
     rather than as speed. 1.05s against 0.86 — a deck that turns itself is
     watched, and a deck that is watched can afford a fifth of a second more. */
  transition: --fk 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- THE LIQUID -----------------------------------------------------------
   Everything under this line is a function of `--dk` — how far a card is from
   the one on screen, signed — and of `--ak`, the same distance without a sign.
   Both are declared on `.faq__card` in `styles.home.css` and both inherit, so
   nothing here reads a second number and nothing here can fall out of step
   with the travel, the ink, the dissolve or the carriage. It is the same one
   number the whole block already spends, spent three more ways.

   AND IT IS ALL CONTINUOUS. There is no class toggled on the card that is
   arriving, no keyframe, no transition of its own: `--fk` interpolates and
   every one of these falls out of it. Interrupt the turn anywhere — press an
   arrow mid-travel, throw the deck with a thumb, put a pointer on it and stop
   the clock dead — and the type, the blur and the lean are all still
   describing the same position, because they ARE the same position. */

/* ONE. THE CARD LEANS AS IT GOES. A skew and not a rotation: a rotation turns
   the whole card about a point and takes the question's baseline with it,
   which reads as a card being tipped over. A skew on Y shears the column —
   the left edge lags the right — so the type leans INTO the travel the way a
   liquid leans in a glass that is being slid across a table. Six tenths of a
   degree at a full card out, which is under what anybody can name and over
   what anybody can miss.

   It replaces the landing's declaration rather than adding to it: the counter
   slide is still here, in the same `transform`, because two rules over one
   transform is the oldest bug in this kind of page. */
.about .hb--ask .faq__card-in {
  transform: translate3d(calc(var(--dk) * 8%), 0, 0)
    skewY(calc(var(--dk) * -0.6deg));
}

/* TWO. THE QUESTION IS BLURRED WHILE IT IS IN FLIGHT and sharp the moment it
   lands. On the ASK band and not on the words, which is three elements a frame
   instead of fifteen — and the whole band is what is moving, so blurring the
   band is the honest description of it.

   Capped with `min()` at one card out, so a deck thrown two cards with a thumb
   does not put a twelve-pixel blur on something the reader is about to read.
   `will-change` is deliberately NOT here: a blur that is promised to the
   compositor on three cards at once is three full-size layers held for the
   life of the page, on the first screen, for an effect that runs for one
   second in twelve. */
.about .hb--ask .faq__ask {
  filter: blur(calc(min(1, var(--ak, 0)) * 4.5px));
}

/* THREE. AND THE WORDS SHEAR AGAINST EACH OTHER INSIDE IT.

   `--u` is the word's own centre as a fraction of its line, written per word
   after layout by `#arch` in `section.js`. Multiplying the card's distance by
   it means the word at the end of a line travels nearly twice as far as the
   word at the start — so a line does not slide, it POURS: the front of it
   arrives first and the tail catches up. That is the whole trick, and it is
   one multiplication.

   The vertical term is `--dk` SQUARED, so it is positive in both directions:
   the line sags on its way out and on its way in, and comes back flat only at
   the position it is standing at. Squared rather than absolute because the
   fall-off is then quadratic — nothing happens in the first tenth of the
   travel, which is what keeps a card that is nearly landed from looking like
   it is still moving.

   The page's own arch is carried through in the same translate. It has to be:
   `.hx__w` in `styles.home.css` declares one, and a second rule over the same
   transform would win outright and silently delete the other. */
.about .hb--ask .faq__q .hx__w {
  transform: translate3d(
    calc(var(--dk, 0) * (0.5 + var(--u, 0.5)) * 26%),
    calc(var(--flow) * var(--bow) * var(--arch) + var(--dk, 0) * var(--dk, 0) * 0.5em),
    0
  );
}

/* AND THE PLATE ARRIVING IS OUT OF FOCUS UNTIL IT IS THERE. `max(0, --dk)` is
   the plate on its way IN and nothing else — a plate the reader has already
   passed is under an opaque one and any blur on it is fill nobody will ever
   see, which is the same argument the landing's scale term makes one line up.

   The room is the one place on this page where the blur is worth its cost: it
   is one element, it is the thing the eye is actually on, and a photograph
   resolving under a halftone that is opening at the same time is the block's
   whole argument drawn twice at once. */
.about .hb--ask .faq__shot {
  filter: contrast(1.04) saturate(1.02) blur(calc(max(0, var(--dk)) * 7px));
}

/* --- THE CLOCK ------------------------------------------------------------
   `--fp` is 0..1 through the current card's stand, written onto the block by
   `tick()` in `ask-deck.js`, to three figures, and only when it has moved. Two
   things read it and both are LENGTHS rather than positions — one inside the
   count in the head band, one inside the carriage on the rail — so neither of
   them can ever be one card out of true with the deck. There is no second
   index anywhere in this block.

   IT IS A HAIRLINE AND NOT A RING. A ring, a dot or a spinner is a fourth
   material in a block made of type and hairlines, and it would be the only
   round thing on this page. A line that fills is the same object the rail, the
   spine, the ledger and the two arrows are already made of.

   AND IT STOPS RATHER THAN RESETS. A pointer over the block, focus inside it,
   a hidden tab or a block scrolled off the top all stall the count where it
   is — see `stall` in `ask-deck.js` — so the line holds exactly where the
   reader last saw it. A progress bar that snaps back to nought when a mouse
   crosses it is a progress bar telling the reader they interrupted something. */
.about .hb--ask .ask__clock {
  position: relative;
  display: block;
  width: clamp(26px, 3.4vw, 46px);
  height: var(--hair);
  margin-left: 0.25em;
  /* The track. `color-mix` and not `opacity`, because an opacity on this
     element would put the fill inside its group and dim that too — the fill is
     a CHILD of the thing it is filling, in both readings of `--fp`. */
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.about .hb--ask .ask__clock::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: currentColor;
  opacity: 0.85;
  transform: scaleX(var(--fp, 0));
  transform-origin: 0 50%;
}

/* The same reading, on the rail, inside the carriage. It is inside rather than
   beside so that it can only ever be as long as the segment it is filling: the
   carriage is one card wide and rides `--fk`, the fill is a fraction of the
   carriage and rides `--fp`, and the two numbers cannot disagree about where
   the deck is because only one of them is about position at all. */
.about .hb--ask .faq__rail-car {
  opacity: 1;
  background: color-mix(in srgb, currentColor 22%, transparent);
}

.about .hb--ask .ask__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: currentColor;
  opacity: 0.9;
  transform: scaleX(var(--fp, 0));
  transform-origin: 0 50%;
}

/* --- and none of it happens to a reader who asked for none of it -----------
   The deck's clock is already off under `prefers-reduced-motion` — `tick()`
   returns on the first line, so `--fp` is never written and both fills stand
   at nought for ever. What is left to switch off is the three things that are
   functions of `--dk`, and they are switched off by being declared away rather
   than by being transitioned to nothing: with `--fk` an integer at every
   moment, `--dk` is an integer too, and a card one out would otherwise be
   carrying a 4.5px blur and half an em of sag while standing perfectly still.

   The clock's own two rules stay. They are furniture that says how long, and
   the answer under reduced motion is "for ever", which is the truth. */
@media (prefers-reduced-motion: reduce) {
  .about .hb--ask .faq__card-in { transform: none; }
  .about .hb--ask .faq__q .hx__w { transform: none; }
  /* The flight blur off, and nothing put back in its place: the shadows this
     used to restore are gone from the base rule too. See `.faq__ask` in
     `styles.home.css` — the floor under this type is the screen's own. */
  .about .hb--ask .faq__ask { filter: none; }
  .about .hb--ask .faq__shot { filter: contrast(1.04) saturate(1.02); }
  .about .hb--ask .faq__deck { transition: none; }
}

/* AND THE TWO STATES THAT TURN THE TRANSITION OFF HAVE TO BE RE-STATED HERE.

   `.faq__deck.is-instant` and `.faq__deck.is-dragging` in `styles.home.css`
   say `transition: none`, and they are two classes deep — (0,2,0). The rule
   above is three, because it is scoped to `.about` and to the hero, so it wins
   the cascade outright and both of them silently stop working: the deck's very
   first position eases in from nowhere on load, and a thumb dragging the cards
   drags them through a 1.05s ease instead of under the finger.

   Neither of those is visible in a diff and both are visible immediately on a
   phone. A stylesheet that raises the specificity of a declaration inherits
   every state that was written to override it. */
.about .hb--ask .faq__deck.is-instant,
.about .hb--ask .faq__deck.is-dragging { transition: none; }

/* --- 620 — THE FILING MARK AND THE QUESTION STOP SHARING A CORNER ----------
   The mark hugs the bottom-right of the room and the question is padded off
   the bottom-left by about the same figure. On a wide screen they never meet:
   the question is set to 17ch and the mark is a hundred points of small caps
   at the far end of a 1320-point band.

   On a phone the question wraps to the full width of the room and its last
   line lands on the mark's own line — "does the work?" and "LINE SCREEN — IT
   OPENS AS YOU ASK" printed through each other, which is two pieces of type
   at two sizes on one baseline and reads as a rendering fault rather than as a
   layout.

   It was true of this block on the landing too and nobody caught it, because
   there it was the fourth screen of six and the mark is the smallest thing in
   it. Here it is the FIRST thing anybody sees of this section, so the question
   gets the room's own foot and the mark keeps its corner underneath.

   620 and not 720: it is the same fold the answer's two columns collapse at,
   in `styles.responsive.css`, and two thresholds for one movement is a band
   of widths where half the block has folded and half has not. */
@media (max-width: 620px) {
  .about .hb--ask .faq__ask {
    padding-bottom: clamp(46px, 6.4vh, 62px);
  }
}