/* A person's page. One design for every person; their facts change, this does not.
   Organic's look, as the Duo note wears it (Amit, 26 Oct 2026: "you have the styling from the organic app… The duo
   blog" is a good reference; content's web/blog-lab.css and web/blog-duo.css): Inter, the beige page, cards on a
   lighter plate with the chat's own lift, the sheets' monospace for labels and dates, the Duo note's yellow for the
   marked word. Phone and desktop are two designs, not one stretched: on a desktop the bio and a list of the page stand
   in a column on the right, like the Duo note's list of exhibits.
   Sizes 36 / 28 / 20 / 18 / 15 / 13 / 12 only (check.mjs holds them). Quieter words step down in size and weight, never
   into grey (alt-design C.0 30). */

/* The builder puts the face inside the built stylesheet, so the first frame is drawn in the page's own type and nothing
   moves when it lands (measured on a slow network, 24 Oct 2026: a late font moved the photo 92px). The monospace is the
   system's, as on the Duo note. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: block; src: url(fonts/Inter.woff2) format("woff2"); }

:root {
  --canvas: #f4efe7;
  --paper: #f8f3ed;
  --ink: #1a1816;
  --chip: color-mix(in srgb, var(--ink) 5%, var(--canvas));
  --chip-deep: color-mix(in srgb, var(--ink) 10%, var(--canvas));
  --empty: color-mix(in srgb, var(--ink) 8%, var(--paper));
  --hairline: color-mix(in srgb, var(--ink) 35%, var(--canvas));
  /* HIS COLOURS (Amit, 26 Oct 2026: "You don't have to use Ronic colors on my page. This is my page, my identity"): his
     jade, #60d0a6, the first pick for his own look on 24 October in place of Ronic's lilac, as the page's one colour,
     in tints measured against the ink and the paper; the beige paper and the ink stay */
  --jade: #60d0a6;
  /* focus and the one mark that must read on the paper: the jade deep enough for 4.9:1 */
  --accent: #1a7656;
  /* the highlighter: a pale jade band over the line, ink on it 13:1 */
  --hl: #c4efdd;
  /* a pick's fill: the house's small fill (content web/styles.css --tone-small) */
  --pick: var(--jade);
  /* a chosen pill: the house's large fill, ink on it 10:1 (content web/styles.css --tone-large) */
  --pick-large: #b3e9d2;
  /* a platform's mark: dark beige, 3.6:1 on a post's card */
  --mark: #8c8173;
  /* a watermark: the marks' beige, a solid pale step of it on the paper (never see-through) */
  --water: color-mix(in srgb, var(--mark) 10%, var(--paper));
  --lift: inset 0 .5px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(26, 24, 22, .06), 0 10px 26px -18px rgba(26, 24, 22, .32);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html.fonts-wait body { visibility: hidden; }
* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 15px/1.55 var(--sans); letter-spacing: -.1px; font-synthesis: none; }
img, video { display: block; max-width: 100%; }
p, blockquote, figure, ol, ul, dl, dd, h1, h2, h3 { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.page { padding: 16px 16px 0; }

/* ---------- the shared parts ---------- */
/* a card: the chat's own frame (content web/team.css .team-work), paper on the beige with its lift */
.card { background: var(--paper); border-radius: 22px; box-shadow: var(--lift); padding: 16px; }
.card-form { font: 500 12px/1.3 var(--sans); }
.card-title { margin-top: 4px; font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; text-wrap: balance; }
.card-foot { margin-top: 8px; font: 300 12px/1.3 var(--sans); }

/* dates, and the link back to where it was said: ink words on a hairline, small and thin (alt-design C.0 15) */
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 12px; font: 400 12px/1.3 var(--mono); }
.out { font: 300 12px/1.3 var(--sans); color: var(--ink); text-decoration: none; border-bottom: .5px solid var(--ink); padding-bottom: 1px; }
.out::after { content: " ↗"; }
mark { color: inherit; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 10%, var(--hl) 10%, var(--hl) 92%, transparent 92%); }

/* ---------- the bio, and the page at a glance ---------- */
/* his face beside his name and his line (Amit, 27 Oct 2026: "make the main image smaller", then "photo can be a bit
   bigger"); then what he does and where, one list, a field a row on a hairline: the label thin and small in capitals,
   the words in ink ("text of CURRENTLY etc can be thin and small") */
.bio-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.bio .portrait { width: 96px; height: 96px; object-fit: cover; object-position: 60% 28%; border-radius: 18px; }
.name { font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; }
.tagline { margin-top: 4px; font: 400 15px/1.35 var(--sans); text-wrap: pretty; }
.roles { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin-top: 16px; border-top: .5px solid var(--hairline); }
.roles dt, .roles dd { padding: 8px 0; border-bottom: .5px solid var(--hairline); }
/* the gap sits inside the label's cell, so each row's line runs unbroken */
.roles dt { padding-right: 16px; font: 300 12px/20px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.roles dd { font: 500 15px/20px var(--sans); }
/* on a phone the links close the page; on a desktop they stay in view here (once a layout) */
.toc { display: none; }

/* ---------- top: how he sees things, his own line, the page's headline ---------- */
.lens { margin-top: 24px; }
.lens-line { font: 500 28px/1.2 var(--sans); letter-spacing: -.7px; text-wrap: balance; }
/* his other lines, under his headline: a row each on a hairline; on a desktop the date and the link sit at the row's
   right, on a phone under the line */
.sayings { display: grid; margin-top: 24px; border-top: .5px solid var(--hairline); }
.sayings li { padding: 12px 0; border-bottom: .5px solid var(--hairline); }
.saying { font: 500 20px/1.3 var(--sans); letter-spacing: -.3px; }
.sayings .meta { margin-top: 4px; }
/* the small poster: his line in a bold serif, the drawing in ink, one line under it, all centred, as a poster sets them */
.poster { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; --serif: ui-serif, "New York", Georgia, "Noto Serif", serif; }
.poster-title { font: 700 28px/1.15 var(--serif); letter-spacing: -.3px; }
/* small, with room around it, as a pen sketch sits on its paper: the card is a sheet of rough paper (tools/paper.py,
   ours, after his sketch's sheet), the line thin and sure, all ink (the red sun left on 27 Oct: "We don't need it") */
.poster { background: var(--paper) url(textures/paper.png) 0 0 / 192px 192px; }
.poster-art { display: block; width: 100%; max-width: 208px; height: auto; margin: 24px 0 16px; overflow: visible; }
.poster-art .ink path, .poster-art .ink circle { fill: none; stroke: var(--ink); stroke-width: .62; stroke-linecap: round; stroke-linejoin: round; }
.poster-art .ink .cap { fill: var(--ink); stroke-width: .4; }
.poster-line { max-width: 280px; font: 400 15px/1.45 var(--serif); }
.brick { transition: opacity 240ms ease-out, transform 240ms ease-out; transition-delay: calc(var(--i) * 30ms); }
.js .poster:not(.is-shown) .brick { opacity: 0; transform: translateY(-8px); }

/* beliefs: other people's words in a serif, a step bigger; who first said it under each */
.beliefs-card { --serif: ui-serif, "New York", Georgia, "Noto Serif", serif; }
.belief-rows { margin-top: 8px; }
.belief-rows li { padding: 16px 0; border-bottom: .5px solid var(--hairline); }
.belief-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.belief { font: 400 20px/1.4 var(--serif); text-wrap: pretty; }
.belief b { font-weight: 600; }
.belief-sub { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; }
.belief s { text-decoration-thickness: 1.5px; }
.path-title { font-size: 20px; }
.belief-who { margin-top: 8px; font: 300 13px/1.45 var(--sans); }
.belief-who b { font-weight: 600; }
.belief-who .out { margin-left: 4px; }

/* ---------- body of work ---------- */
.section { padding-top: 48px; }
.section-title { font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; text-wrap: balance; }
/* something made: the piece's words, and its own exhibit beside them */
.years { display: grid; gap: 48px; }
.year { padding-top: 8px; border-top: .5px solid var(--hairline); font: 500 12px/1.3 var(--mono); }
.entries { margin-top: 16px; display: grid; gap: 40px; }
.made { display: grid; gap: 16px; }
.kind { font: 500 12px/1.3 var(--sans); }
.made-title { margin-top: 4px; font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; text-wrap: balance; }
.made-line { margin-top: 8px; font: 400 15px/1.55 var(--sans); text-wrap: pretty; }
/* the loop is cut to its own card (a video's beige never quite matches the page's), and stands on the page as a card:
   the chat's corner and lift */
.made-excerpt { margin-top: 12px; font: 400 15px/1.5 var(--sans); }
.made-media { display: block; max-width: 300px; color: var(--ink); }
.made-media video { width: 100%; height: auto; aspect-ratio: 972 / 1186; border-radius: 22px; background: var(--paper); box-shadow: var(--lift); }

/* ---------- the pieces after the first screen: Organic's type, their own cards come in the next pass ---------- */
.said { font-family: var(--sans); color: var(--ink); }
.said p + p { margin-top: 12px; }
.said.big { font: 500 20px/1.3 var(--sans); letter-spacing: -.3px; text-wrap: balance; }
.said.read { font: 400 15px/1.55 var(--sans); text-wrap: pretty; }
.said.read .pull { font: 500 20px/1.3 var(--sans); }
.title { margin-top: 4px; font-weight: 600; font-size: 18px; }
.rest { margin-top: 8px; }
/* his own line, the take a piece leads with (the Duo note: his takes a size and a weight over the rest), its point
   run over with the highlighter */
.take { max-width: 640px; font: 500 20px/1.35 var(--sans); letter-spacing: -.3px; text-wrap: pretty; }

/* a post on Twitter, in the page's own card: Twitter's layout (the face, the name and handle, the bird at the corner, the
   post as posted, the date) in the page's type and ink; the bird in Twitter's blue is the one hint. Two side by side on
   a phone in a change of mind; the date is the link, and the whole card opens the post. */
.xpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
/* a post's card sits close to the page: half the paper's step, a lighter lift (Amit, 26 Oct: "Color delta between the
   Twitter card backgrounds and the background of the page should be a little less") */
.xpost, .li { background: color-mix(in srgb, var(--paper) 50%, var(--canvas)); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(26, 24, 22, .05); }
.xpost { position: relative; padding: 12px; }
.x-head { display: flex; align-items: center; gap: 8px; }
.x-face { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.x-who { display: flex; flex-direction: column; min-width: 0; }
.x-who b { font: 600 15px/1.3 var(--sans); letter-spacing: 0; }
.x-who span { font: 400 13px/1.3 var(--sans); letter-spacing: 0; }
/* the bird and LinkedIn's mark in dark beige, never the brand's colour (Amit, 26 Oct: "We should not use brand colors.
   Why should we give them so much importance") */
.x-mark { width: 16px; height: 16px; flex: none; margin-left: auto; align-self: flex-start; fill: var(--mark); }
/* the post's words a size up and open, the way Twitter sets them big (Amit, 26 Oct: "your fonts are not very good… make
   it more readable") */
.x-text { margin-top: 12px; font: 400 15px/1.45 var(--sans); letter-spacing: 0; }
.x-text p + p { margin-top: 12px; }
.x-when { display: inline-block; margin-top: 12px; font: 300 12px/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.x-when::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.x-when:focus-visible { outline: none; }
.x-when:focus-visible::after { outline: .5px solid var(--accent); outline-offset: 2px; }

/* a post on LinkedIn, like a blog: LinkedIn named at the head with its mark, a title, the opening, the link to the rest */
.li-head { display: flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--sans); }
.li-mark { width: 16px; height: 16px; flex: none; fill: var(--mark); }
.li-title { margin-top: 8px; font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; text-wrap: balance; }
.li-body { margin-top: 8px; font: 400 15px/1.55 var(--sans); text-wrap: pretty; }
.li-body p + p, .li-body .figures + p { margin-top: 12px; }
/* the figures a post states: the number big and regular, its unit small beside it, its label over it */
.figures { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 16px 0; }
.figure-label { font: 400 12px/1.3 var(--mono); }
.figure-value { margin-top: 4px; font: 400 36px/1 var(--sans); letter-spacing: -1px; }
.figure-unit { font: 400 15px/1.3 var(--sans); letter-spacing: 0; }
.take + .card { margin-top: 16px; }

/* a podcast episode: the show's tile in the darker beige, the show, the title, its length; where to listen */
.pod { background: color-mix(in srgb, var(--paper) 50%, var(--canvas)); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(26, 24, 22, .05); }
.pod .li-mark { fill: none; stroke: var(--mark); }
.pod-head { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pod-cover { flex: none; display: grid; place-items: center; width: 64px; height: 64px; padding: 6px; border-radius: 12px; background: var(--chip-deep);
  font: 700 12px/1.1 var(--sans); text-align: center; }
.pod-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pod-words b { font: 600 15px/1.3 var(--sans); }
.pod-words small { font: 300 12px/1.3 var(--sans); }

/* something beside a post: a picture cut to the card's corner, held at its foot (the machine) and its middle (the typed
   words), or a small card of figures, as tall as the post */
.pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center bottom; border-radius: 22px; box-shadow: var(--lift); }
.side-figures { display: flex; flex-direction: column; }
/* the chart inside a post: an inset on the chip's shade, between the paragraph it speaks to and the rest */
.xpost .inset { margin: 16px 0; padding: 16px; border-radius: 14px; background: var(--chip); }
.xpost .inset .card-title { font-size: 15px; }
.xpost.has-inset .x-text + .inset + .x-text { margin-top: 0; }
/* how you disappear: the line drawn in ink over a pale area, the start and the year's end labelled clear of it */
.decay .card-title { margin-top: 4px; }
.decay-chart { position: relative; margin-top: 16px; padding-top: 20px; }
.decay-plot { display: block; width: 100%; height: 120px; overflow: visible; border-bottom: 1px solid var(--ink); }
.decay-area { fill: #dcf2e7; stroke: none; transition: opacity 400ms ease-out 400ms; }
/* the dash is four lengths long: the chart is stretched to its box and a thin line keeps its width, so the browser
   measures the dash on the stretched line; four lengths covers any stretch, and the line always ends drawn whole */
.decay-line { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 4; stroke-dashoffset: 0; transition: stroke-dashoffset 400ms ease-out; }
.js .decay:not(.is-shown) .decay-line { stroke-dashoffset: 4; }
.js .decay:not(.is-shown) .decay-area { opacity: 0; }
.d-start { position: absolute; left: 0; top: 0; font: 400 12px/1 var(--mono); }
.d-end { position: absolute; right: 0; bottom: 16px; font: 400 20px/1 var(--sans); }
.d-axis { display: flex; justify-content: space-between; margin-top: 8px; font: 300 12px/1 var(--mono); }
.side-figures .figures { margin: 16px 0; }

/* a link to a page on this site: ink words on a hairline, an arrow forward */
.go { font: 500 12px/1.3 var(--sans); color: var(--ink); text-decoration: none; border-bottom: .5px solid var(--ink); padding-bottom: 1px; }
.go::after { content: " →"; }
.made-media img { width: 100%; height: auto; border-radius: 14px; }

/* ---------- the journey at a glance, a compact list (journey in person.mjs) ---------- */
/* rows on hairlines, as the list beside the page: the years in the monospace, the place and the role; a row with a
   line of his opens in place, its chevron turning */
.j-rows { margin-top: 12px; border-top: .5px solid var(--hairline); }
.j-rows li { border-bottom: .5px solid var(--hairline); }
.j-row { display: block; color: var(--ink); text-decoration: none; }
.j-row > summary, div.j-row, a.j-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; column-gap: 8px; align-items: baseline;
  padding: 8px 4px; list-style: none; }
.j-row > summary { cursor: pointer; }
.j-row > summary::-webkit-details-marker { display: none; }
.j-years { font: 300 12px/1.4 var(--mono); }
.j-what { font: 300 13px/1.4 var(--sans); }
.j-what b { font-weight: 600; }
.chev { width: 12px; height: 12px; align-self: center; fill: none; stroke: var(--ink); stroke-width: 1.25; transition: transform 240ms ease-in-out; }
details[open] .chev { transform: rotate(180deg); }
.j-line { margin: 0 0 8px; padding: 0 4px 0 108px; font: 400 13px/1.45 var(--sans); }
.j-row > summary:focus-visible, a.j-row:focus-visible { outline: .5px solid var(--accent); outline-offset: 2px; }
.journey .card-foot { margin-top: 12px; }
.year { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.year-stage { font: 400 12px/1.3 var(--sans); }

/* ---------- investing: a widget (backed in person.mjs) ---------- */
/* pills as Organic's widgets draw them: a capsule in the chip's shade; the chosen one filled with the house's light
   indigo, its words a weight up, the bold copy held in the same cell so a pick never widens it */
.backed .card-title { margin-top: 4px; }
.w-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.w-pill { position: relative; display: inline-grid; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--ink); font: 400 13px/1 var(--sans); cursor: pointer; transition: background-color 240ms ease-out; }
.w-pill::after { content: ""; position: absolute; inset: -4px -2px; }
.w-pill > span { grid-area: 1 / 1; }
.pill-hold { visibility: hidden; font-weight: 500; }
.w-pill[aria-pressed="true"] { background: var(--pick-large); font-weight: 500; cursor: default; }
.w-pill:focus-visible { outline: .5px solid var(--accent); outline-offset: 2px; }
/* every group's companies in one cell, only the chosen one seen: the card is as tall as the longest group */
.w-views { display: grid; margin-top: 16px; }
.w-view { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-content: start; visibility: hidden; border-top: .5px solid var(--hairline); }
.backed[data-on="0"] .w-view[data-g="0"], .backed[data-on="1"] .w-view[data-g="1"], .backed[data-on="2"] .w-view[data-g="2"],
.backed[data-on="3"] .w-view[data-g="3"], .backed[data-on="4"] .w-view[data-g="4"], .backed[data-on="5"] .w-view[data-g="5"] { visibility: visible; }
.w-view li { border-bottom: .5px solid var(--hairline); }
/* a company: its name, then what it does; the whole row the link to it */
.co { display: grid; gap: 2px; padding: 8px 4px; color: var(--ink); text-decoration: none; }
.co b { font: 600 15px/1.3 var(--sans); }
a.co b::after { content: "\00a0↗"; font-weight: 300; font-size: 12px; }
.co span { font: 400 13px/1.4 var(--sans); }
a.co:focus-visible { outline: .5px solid var(--accent); outline-offset: 2px; }

/* ---------- where to find him: his handles, a row each on a hairline; side by side on a desktop (handles in
   person.mjs) ---------- */
.h-rows { margin-top: 12px; border-top: .5px solid var(--hairline); }
.h-rows li { border-bottom: .5px solid var(--hairline); }
/* a place: its name small, its handle the hero; its mark a large watermark at the right, a solid pale shade of the
   marks' beige, clipped to the cell; the copy button at the end of the row */
.h-cell { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 8px; }
.h-water { position: absolute; right: 56px; top: 50%; width: 56px; height: 56px; transform: translateY(-50%); fill: var(--water); pointer-events: none; }
.h-water.is-line { fill: none; stroke: var(--water); stroke-width: 1.6; }
.h-water.is-line .dot { fill: var(--water); stroke: none; }
.h-row { position: relative; display: grid; row-gap: 4px; padding: 12px 4px; color: var(--ink); text-decoration: none; }
.h-name { font: 400 12px/1.3 var(--sans); }
.h-name::after { content: "\00a0↗"; font-weight: 300; }
.h-handle { font: 600 20px/1.2 var(--sans); letter-spacing: -.3px; overflow-wrap: anywhere; }
.h-copy { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.h-glyph { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.h-copy .is-done { display: none; stroke: var(--accent); }
.h-copy.is-copied .is-done { display: block; }
.h-copy.is-copied .is-copy { display: none; }
.h-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.h-row:focus-visible, .h-copy:focus-visible { outline: .5px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .h-row:hover .h-handle { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; } .h-copy:hover { background: var(--chip); } }

/* ---------- close: his line on a card ---------- */
.close { margin-top: 48px; background: var(--paper); border-radius: 22px; box-shadow: var(--lift); padding: 24px 16px; }
.close .said { font: 500 20px/1.3 var(--sans); letter-spacing: -.3px; }
.foot { padding: 24px 0 48px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

a:focus-visible { outline: .5px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .out:hover { border-bottom-width: 1px; }
  .toc a:hover { background: var(--chip); }
  .j-row > summary:hover, a.j-row:hover { background: var(--chip); }
  .w-pill:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ink) 7%, var(--chip)); }
  a.co:hover { background: var(--chip); }
  .xpost:hover .x-when { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 2px; }
  .go:hover, .out:hover { border-bottom-width: 1px; }
}

@media (min-width: 640px) {
  .made { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .entries { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .entries > .entry { grid-column: 1 / -1; }
  .entries > .entry.is-x { grid-column: auto; }
  /* a post with something beside it starts its own row, the thing beside it in the other half, so the two never part */
  .entries > .entry.has-beside { grid-column: 1; }
  .entries > .entry.is-beside { grid-column: 2; }
  .entries > .entry.has-beside.has-left { grid-column: 2; }
  .entries > .entry.is-beside.is-left { grid-column: 1; }
  .is-beside > figure { height: 100%; }
  /* the picture takes the post's height and never sets it: it lies over its box */
  .pic { position: relative; min-height: 240px; }
  .pic img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .side-figures { padding: 24px; }
  .side-figures .figures { margin: auto 0; }
  .xpair { gap: 16px; }
  .xpost { padding: 16px; }
  .x-head { gap: 12px; }
  .x-face { width: 40px; height: 40px; }
  .x-mark { width: 20px; height: 20px; }
  .x-text { font-size: 18px; line-height: 1.45; }
  .li { padding: 24px; }
  .made.is-picture { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; }
  .backed { padding: 24px; }
  .w-view { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .journey { padding: 24px; }
  .j-row > summary, div.j-row, a.j-row { grid-template-columns: 120px minmax(0, 1fr) 16px; }
  .sayings li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
  .sayings .meta { flex: none; margin-top: 0; }
  .is-beside .decay .card-title { font-size: 15px; }
  .beliefs-card { padding: 24px; }
  .j-line { padding-left: 132px; }
  .row { grid-template-columns: 120px 1fr; column-gap: 24px; }
}

/* ---------- desktop: its own design. One centred block: the reading column and a column on the right as tall as the
   screen, like the Duo note's list of exhibits (Amit, 26 Oct: "balance blogs with bio... as of now it is lopsided").
   The right column is the bio card over the page at a glance; it stays in view from the top to the close. ---------- */
@media (min-width: 1040px) {
  .page { display: grid; grid-template-columns: minmax(0, 680px) 280px; column-gap: 48px; justify-content: center; max-width: 1056px; margin: 0 auto; padding: 48px 24px 0; }
  .page > * { grid-column: 1; }
  /* rows 1 to 7: the line, the path, the beliefs, the body of work, the investing, the handles, the close */
  .side { grid-area: 1 / 2 / span 7; }
  .side-in { position: sticky; top: 24px; }
  .foot { grid-column: 1 / -1; }
  .lens { margin-top: 0; }
  .lens-line { font-size: 36px; letter-spacing: -1px; }
  .section { padding-top: 72px; }
  .close { margin-top: 72px; padding: 24px; }
  .handles { padding: 24px; }
  .h-rows { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-bottom: .5px solid var(--hairline); }
  .h-rows li { border-bottom: 0; }
  .h-rows li + li { border-left: .5px solid var(--hairline); }
  /* side by side, each cell taller: the watermark larger at its corner, the copy button at its top right */
  .h-cell { align-items: start; padding: 4px 4px 4px 12px; }
  .h-row { padding: 16px 0 24px; }
  .h-water { right: -8px; top: auto; bottom: -16px; width: 72px; height: 72px; transform: none; }

  .toc { display: block; margin-top: 24px; }
  .toc-head { margin-bottom: 8px; font: 500 12px/1.3 var(--mono); }
  .toc ol { border-top: .5px solid var(--hairline); }
  .toc li { border-bottom: .5px solid var(--hairline); }
  .toc a { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding: 4px 8px; font: 400 12px/1.35 var(--sans); color: var(--ink); text-decoration: none; }
  .toc a > span { font-family: var(--mono); font-weight: 300; }
  .toc a.is-on { box-shadow: inset 2px 0 0 var(--ink); }
}

/* ---------- a story's own page: one reading column, his short lines, the talk drawn as workcards ---------- */
.story { max-width: 640px; margin: 0 auto; padding: 24px 16px 0; }
.back { margin-bottom: 24px; }
.back-go::after { content: none; }
.back-go::before { content: "← "; }
.story-title { font: 500 36px/1.15 var(--sans); letter-spacing: -1px; }
.story-dek { margin-top: 8px; font: 400 18px/1.4 var(--sans); }
.by { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.by-face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.by p { display: flex; flex-direction: column; }
.by b { font: 600 13px/1.3 var(--sans); }
.by span { font: 300 12px/1.3 var(--sans); }
.story-body { margin-top: 32px; }
.scene { margin-top: 48px; }
.scene:first-child { margin-top: 0; }
.scene::after { content: ""; display: block; clear: both; }
.scene > * + * { margin-top: 16px; }
.scene-title { font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; }
/* his telling, in his own short lines */
.lines { font: 400 18px/1.5 var(--sans); letter-spacing: -.2px; }
.lines.is-last { font: 500 20px/1.4 var(--sans); }
/* a picture is small: 200px, beside the lines it goes with */
.story-pic { float: right; width: 160px; margin: 16px 0 16px 16px; }
.story-pic img, .slack-pic img, .news-pic img { width: 100%; height: auto; border-radius: 14px; }
/* a chat: who speaks small, what they say under it; a message can carry a card of what it shows */
.chat, .slack, .news { clear: both; }
.msgs { display: grid; gap: 12px; }
.msg-who { display: block; font: 600 12px/1.3 var(--sans); }
.msg-text { margin-top: 2px; font: 400 15px/1.45 var(--sans); }
.msg-shown { margin-top: 8px; padding: 12px 16px; border-radius: 14px; background: var(--chip); }
.msg-shown .figures { margin: 0; }
.rating-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rating-row b { font: 400 20px/1 var(--sans); }
.rating-stars { display: flex; gap: 2px; }
.rating-stars svg { width: 20px; height: 20px; }
/* the stars in his jade, as every drawn thing on his site (Amit, 27 Oct 2026: "All the widgets and all the exhibits
   should be my color"); a filled star reads against an empty one by its fill */
.star-fill { fill: var(--jade); }
.star-line { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
/* a message on Slack: the channel, the message, the picture it shared, the reactions */
.slack-channel { font-family: var(--mono); }
.slack .msg { margin-top: 8px; }
.slack-pic { margin-top: 12px; max-width: 320px; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.reactions span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--chip); font-size: 15px; }
/* the news: kicker, headline, lines; its picture small beside them */
.news { display: grid; gap: 12px; }
.news-headline { margin-top: 4px; font: 600 18px/1.3 var(--sans); letter-spacing: -.2px; }
.news-lines { margin-top: 8px; font: 400 15px/1.45 var(--sans); }
.news-pic { max-width: 200px; }
.disclaimer { clear: both; margin-top: 48px; padding-top: 12px; border-top: .5px solid var(--hairline); font: 300 13px/1.5 var(--sans); }
/* ---------- a short post (post.mjs): the story page's frame, paragraphs to read, an exhibit or two between them ---------- */
.post-body { margin-top: 24px; }
.post-body > * + * { margin-top: 24px; }
.post-p { font: 400 18px/1.55 var(--sans); }
.poster.is-drawing { padding: 24px 16px; }
.poster.is-drawing .poster-art { margin: 0; max-width: 360px; }
.poster-go { margin-top: 16px; }
/* bars, one a row: the label small above, the figure at the bar's end; the bar's length worked out from the figures */
.bar-rows { margin-top: 16px; display: grid; gap: 16px; }
.bar-label { font: 400 12px/1.3 var(--sans); }
.bar-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bar { display: block; height: 16px; width: max(4px, calc((100% - 72px) * var(--w))); background: var(--pick-large); transform-origin: left;
  transition: transform 400ms ease-out; }
.is-point .bar { background: var(--accent); transition-delay: 240ms; }
.bar-value { font: 400 20px/1 var(--sans); }
.js .bars:not(.is-shown) .bar { transform: scaleX(0); }
.bars .card-foot { margin-top: 16px; }
.post-sources { margin-top: 48px; border-top: .5px solid var(--hairline); border-bottom: .5px solid var(--hairline); }
.post-sources summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px;
  font: 500 12px/1.3 var(--sans); list-style: none; cursor: pointer; }
.post-sources summary::-webkit-details-marker { display: none; }
.post-sources[open] .chev { transform: rotate(180deg); }
.post-sources summary:focus-visible { outline: .5px solid var(--accent); outline-offset: 2px; }
.post-sources ul { display: grid; gap: 8px; padding: 0 4px 16px; }
.post .story-dek { text-wrap: pretty; }
.story-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 0 48px; }
@media (min-width: 640px) {
  .story { padding-top: 48px; }
  .story-pic { width: 200px; margin-left: 24px; }
  .chat, .slack, .news { padding: 24px; }
  .news { grid-template-columns: minmax(0, 1fr) 180px; align-items: start; gap: 24px; }
}

/* reduced motion: nothing animates; the curve is drawn from the first frame (person.mjs marks it shown) */
@media (prefers-reduced-motion: reduce) { .chev, .decay-line, .decay-area, .w-pill, .brick, .bar { transition: none; } }