.about-section {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(520px, .98fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(42px, 5.2vw, 112px);
  min-height: 100svh;
  padding: clamp(24px, 2.1vw, 42px) 4.25vw clamp(28px, 3.4vw, 64px);
  overflow: hidden;
  background: #fff;
  color: #111;
  /* Typography is the host's, inherited. The section used to state the Apple
     stack so it looked as drawn in any host — and on the portfolio that beat
     the host's own rule: the site puts SF on Apple platforms and Inter on
     everything else (its src/font.js + tokens.css), so on Android the header
     came up in Inter and this section under it in Arial's stand-in. Measured
     17 Sep with the portfolio's tools/verify/about.mjs. On an Apple device the
     inherited stack is the same SF. State a stack here again only for a host
     that has none. */
  -webkit-font-smoothing: antialiased;
  /* The quiet ink: description and credit line share it. #737373 since 25 Sep
     ("okay go with A"): 4.7:1 on white, over the 4.5:1 WCAG AA asks of text
     this size; it was #929292, 3.1:1. */
  --about-quiet: #737373;
}

.about-section[data-phase="flicker"] .about-topline,
.about-section[data-phase="composition"] .about-topline,
.about-section[data-phase="mosaic"] .about-topline,
.about-section[data-phase="burst"] .about-topline,
.about-section[data-phase="resolve"] .about-topline,
.about-section[data-phase="flicker"] .about-copy,
.about-section[data-phase="composition"] .about-copy,
.about-section[data-phase="mosaic"] .about-copy,
.about-section[data-phase="resolve"] .about-copy {
  opacity: 0;
  transform: translateX(-18px);
  pointer-events: none;
}

.about-topline,
.about-copy {
  transition: opacity 760ms ease, transform 900ms cubic-bezier(.2,.75,.2,1);
}

.about-topline {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 18px;
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

.about-copy {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: clamp(32px, 4.8vw, 92px);
  /* Keeps the copy clear of the portrait panel once the stage has docked.
     The panel is absolutely positioned, so the grid gap does not reach it. */
  padding-right: clamp(20px, 4.4vw, 96px);
  /* The description and the credit are pinned to the bottom of this column as
     a group (margin-top: auto on the description); the gap between the two is
     the credit's own margin-top. */
  padding-bottom: clamp(8px, 1.2vw, 20px);
}

/* The title in the site's own display type — the hero's rule (styles/layout.css,
   `.hero h1`): the same weight, tracking and leading, so the two headlines read
   as one voice on a Mac, an iPhone and an Android now that the section inherits
   the site's face (Khusan, 17 Sep: "aligned with our text style … in terms of
   font we chose and kerning"). It was 400 at -.042em, the "1%" tighter still.
   One line at every width, sized by the column it sits in: at this weight and
   tracking the text runs about 10.4× the font size, so beside the docked
   stage (the two-column grid, 901px and up) the size is capped at 4.2vw of the
   viewport — about the column's width over 10.4 — and on the stacked layout,
   where the copy has the whole width, at 8.6vw. Between 901 and ~1200px the
   grid leaves the copy 218–381px (the stage column keeps a 520px minimum), and
   no readable size fits nineteen characters there — the old title overflowed
   that band by 100px+ and was clipped — so beside the stage the title may wrap
   to two lines ("1% Product / Designer", as the hero's headline is two);
   stacked, it is one line, nowrap. Measured 17 Sep at 320–1920. */
.about-copy h1 {
  margin: 0;
  max-width: 100%;
  font-size: min(clamp(34px, 6.4vw, 66px), 4.2vw);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* One measure for the description and the credit (Khusan, 25 Sep: "move shops
   on the desktop to the next line make it similar width as 'The 1% isn't about
   being better…' width should be consistent across all devices"). 34.5 times
   the description's own size, so it holds the same words per line at every
   width that has room for it: on the Mac face the first line breaks before
   "things" (32.4em of text, "things" would need 35.4) and the fourth before
   "Shops," (33.1em to "Pay,", 36.4 with "Shops,"); Inter, a touch wider, breaks
   the fourth one word earlier, before "Pay,". Where the column is narrower — a
   phone — the column is the measure, as before. It was a 780px cap, which the
   column never reached. */
.about-copy {
  --about-measure: calc(34.5 * clamp(15px, 1.08vw, 21px));
}

.about-description {
  max-width: var(--about-measure);
  margin-top: auto;
  color: var(--about-quiet);
  font-size: clamp(15px, 1.08vw, 21px);
  line-height: 1.78;
  letter-spacing: -.018em;
}

/* No line ends on a word alone (Khusan, 25 Sep: "Word simple is a widow on
   the desktop full preview" — it was, at 1366–1920 wide, and "before" at
   1024). `pretty`, not `balance`: the lines fill as they did and only the last
   ones re-break to keep the orphan off — the Resume page cards' rule
   (styles/layout.css, .job li and .note). */
.about-description p {
  margin: 0 0 .55em;
  text-wrap: pretty;
}

.about-description p:last-child {
  margin-bottom: 0;
}

.about-stage {
  position: absolute;
  z-index: 1;
  left: 52%;
  right: 4.25vw;
  top: clamp(20px, 2.1vw, 42px);
  bottom: clamp(28px, 3.4vw, 64px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--about-bg, #deddda);
  transition: left 1100ms cubic-bezier(.2,.75,.2,1), right 1100ms cubic-bezier(.2,.75,.2,1), top 1100ms cubic-bezier(.2,.75,.2,1), bottom 1100ms cubic-bezier(.2,.75,.2,1), border-radius 900ms ease, background-color 320ms ease;
}

.about-section[data-phase="flicker"] .about-stage,
.about-section[data-phase="composition"] .about-stage,
.about-section[data-phase="mosaic"] .about-stage,
.about-section[data-phase="burst"] .about-stage,
.about-section[data-phase="resolve"] .about-stage {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
}

.about-canvas,
.about-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-canvas {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.about-section.is-ready .about-canvas {
  opacity: 1;
}

.about-fallback {
  object-fit: cover;
  object-position: center center;
  transition: opacity 420ms ease;
  /* Not a thing to pick up. The canvas above it takes no pointer events, so a
     drag across the stage reached this image and the browser started a native
     drag with the portrait as the ghost (Khusan, 24 Sep: "if i try to drag
     something on the screen … it is picking my image"). No pointer events, no
     drag (Safari), no select, no long-press save sheet on iOS; the markup adds
     draggable="false" for the rest. It is decorative — the fallback for a page
     with no script — and the copy beside it is the real text. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.about-section.is-ready .about-fallback,
.about-section.is-loading .about-fallback {
  opacity: 0;
}

.about-controls {
  position: absolute;
  right: 4.25vw;
  bottom: clamp(18px, 2.5vw, 42px);
  z-index: 3;
  display: flex;
  gap: 17px;
  opacity: 1;
  transition: opacity 500ms ease;
}

.about-section[data-phase="flicker"] .about-credit,
.about-section[data-phase="flicker"] .about-controls,
.about-section[data-phase="composition"] .about-credit,
.about-section[data-phase="composition"] .about-controls,
.about-section[data-phase="mosaic"] .about-credit,
.about-section[data-phase="mosaic"] .about-controls,
.about-section[data-phase="burst"] .about-credit,
.about-section[data-phase="burst"] .about-controls,
.about-section[data-phase="resolve"] .about-controls {
  opacity: 0;
  pointer-events: none;
}

.about-controls button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #b8b8b8;
  background: none;
  color: #737373;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.about-controls button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 5px;
}

.about-controls button[hidden] {
  display: none;
}

/* Skip and Replay mean nothing until the module is running: not while the
   pictures decode, and not in the fallback state without a script. */
.about-section:not(.is-ready) .about-controls {
  display: none;
}

/* In the copy column, not floated over it — so it wraps on exactly the same
   measure as the description instead of on a width of its own.
   Accessible since 25 Sep ("okay make it accessible then"): it was 11px in
   the section's quiet grey, 3.1:1 on white, under the 4.5:1 that WCAG AA asks
   of text this size. Now 12px, the size web guidance gives small print, in
   the quiet ink at #737373 — the Skip button's grey, 4.7:1, a neutral like
   the one before — which the description took the same day ("okay go with A"). */
.about-credit {
  max-width: var(--about-measure);   /* the description's measure, see above */
  text-wrap: pretty;                 /* as the description: "View the board" was alone at 1024 and 360 wide */
  margin-top: 30px;
  color: var(--about-quiet);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: -.008em;
  transition: opacity 500ms ease;
}

/* The link to his board at the end of the credit (25 Sep, "View the board"):
   the line's own grey, underlined so it reads as a link without a pointer
   over it — the quiet underline of the Skip button — and full ink under the
   pointer. It opens the board in a new tab, so the page stays open. Kept on
   one line: at 12px a narrow column broke it into "View" and "the board". */
.about-credit a {
  white-space: nowrap;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.about-credit a:hover {
  color: var(--ink, #1d1d1f);
}

.about-credit a:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
  border-radius: 2px;
}

.about-preview-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 4.25vw;
  background: #f7f7f7;
  color: #777;
  font-size: 12px;
}

.about-preview-tools input {
  width: min(65vw, 600px);
  vertical-align: middle;
}

.about-preview-tools a {
  color: inherit;
}

.about-variant {
  margin-right: auto;
  color: #444;
}

@media (max-width: 900px) {
  .about-section {
    /* The section's own edges, as variables: the stage reads them to bleed
       over them by exactly these amounts while the sequence plays (about.v2.css). */
    --about-pad-x: clamp(18px, 3vw, 30px);
    --about-pad-top: clamp(24px, 2.1vw, 42px);
    --about-gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--about-gap);
    /* The side padding is the header's own rule (styles/hud.css: 18px on a
       phone, 30px at width), so the portrait, the title and the copy share one
       edge with the name above them (Khusan, 17 Sep: "on phone about me is
       edge to edge, give consistent padding" — it was 24px here and 20px under
       600px, its own values, two off the site's). */
    padding-inline: var(--about-pad-x);
  }

  .about-topline,
  .about-copy,
  .about-stage {
    grid-column: 1;
  }

  .about-copy {
    grid-row: 3;
    padding: 30px 0 0;
  }  /* Stacked: the copy has the whole width, so the one-line cap loosens to
     8.6vw (the base rule's 4.2vw is for the half-width column beside the stage). */
  .about-copy h1 {
    font-size: min(clamp(34px, 6.4vw, 66px), 8.6vw);
    white-space: nowrap;
  }


.about-description {
    margin-top: 20px;
  }

  .about-stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    grid-row: 2;
    /* At rest it gives up half the screen so the copy comes with it. While the
       animation is running it takes the lot — see the phase rule below. */
    min-height: 50svh;
    transition: min-height 900ms cubic-bezier(.2,.75,.2,1);
  }

  .about-section[data-phase="flicker"] .about-stage,
  .about-section[data-phase="composition"] .about-stage,
  .about-section[data-phase="mosaic"] .about-stage,
  .about-section[data-phase="burst"] .about-stage,
  .about-section[data-phase="resolve"] .about-stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    border-radius: 10px;
    /* The section's top padding, the name line and the row gap — so while it
       plays, the name and the animation come to exactly one viewport. svh, not
       vh, so a collapsing mobile toolbar cannot crop it. */
    min-height: calc(100svh - 74px);
  }

  .about-controls {
    right: var(--about-pad-x);
  }

}

@media (max-width: 600px) {
  .about-section {
    --about-pad-top: 24px;
    grid-template-rows: auto auto auto;
    padding: var(--about-pad-top) var(--about-pad-x) 26px;   /* the header's side padding, see above */
  }

  /* The title a touch closer to the portrait (Khusan, 25 Sep: "on mobile can
     you move a very slightly above the title close to the image"): the copy's
     top padding 30px → 20px, so the image to the title's box is 48px, from 58.
     The whole column moves with it; the title-to-description spacing is
     untouched, and a tablet keeps the stacked layout's 30px. */
  .about-copy {
    padding-top: 20px;
  }

  /* The headline's line-height is .98, so its glyphs sit ~4px below its box —
     the gap you see is this margin less that. */
  .about-description {
    margin-top: 16px;
    font-size: 14px;
  }

  .about-preview-tools {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-inline: 20px;
  }

  .about-preview-tools input {
    width: 70vw;
  }
}