/* Written on the site, not generated by scripts/port-brand-pages.py. The launch post: the base the research posts
   share (tokens, page, footer, menu), then its own figures: the opening question, the three approaches, the trashcan, the
   founders' photograph, the fabric and its overview, the results, the developer view and the ending. The site is
   light only, so the post has no dark variant. */

  :root {
    --paper: #F2F0EB;
    --ink: #111111;
    --muted: #6B6862;
    --rule: #111111;
    --faint: #DCD9D2;
    --cyan: #08C6CA;      /* flat stand-in for canvas drawing; surfaces use --cyan-paint */
    --cyan-paint: repeating-linear-gradient(176deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 3px, rgba(0, 60, 66, .07) 3px 4px, transparent 4px 6px),
      linear-gradient(100deg, #00ECF0 0%, #0BD3D8 38%, #10B4BB 72%, #16A0A8 100%);
    --cyan-edge: #111111;
    --pen: #2A3FB8;
    --t0: #D98C78;   /* video      · dusty coral   */
    --t1: #D4B160;   /* audio      · faded mustard */
    --t2: #9DB8C9;   /* pdf        · powder blue   */
    --t3: #9FB096;   /* txt · md   · sage          */
    --t4: #B3A5C4;   /* json · xlsx · lavender grey */
    --sans: "Instrument Sans", system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, monospace;
    --display: "Fraunces", Georgia, serif;   /* the soft serif: rounded and a little wonky */
    --dw: 400;          /* display weight */
    --dt: .35;          /* display tracking multiplier */
    --dfv: "SOFT" 100, "WONK" 1, "opsz" 144;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); }
  :root { --gutter: 32px; }
  @media (max-width: 600px) { :root { --gutter: 20px; } }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
  .mono { font-family: var(--mono); }
  a { color: var(--ink); }
  body > nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--faint); }
  body > nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
  .logo img { height: 28px; display: block; }
  body > nav .links { display: flex; gap: 28px; margin-left: auto; margin-right: 32px; }
  body > nav .links a { text-decoration: none; font-size: 14px; }
  @media (max-width: 900px) { body > nav .links { display: none; } }
  .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font: 500 14px var(--sans); text-decoration: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
  .btn:hover { background: var(--cyan-paint); color: #111; border-color: var(--cyan-edge); }
  .legal { min-height: 50vh; max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
  .legal .eyebrow { font: 400 12px var(--mono); color: var(--muted); margin: 0 0 14px; }
  .legal h1 { font: var(--dw) clamp(40px, 6vw, 64px)/1.02 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.045em * var(--dt)); margin: 0 0 14px; }
  .legal .updated { font: 400 12px var(--mono); color: var(--muted); margin: 0 0 44px; }
  .legal h2 { font: var(--dw) 28px/1.15 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.02em * var(--dt)); margin: 52px 0 14px; padding-top: 20px; border-top: 1px solid var(--faint); }
  .legal h3 { font: 500 17px/1.3 var(--sans); margin: 30px 0 8px; }
  .legal h4 { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 24px 0 8px; }
  .legal p, .legal li { color: #2b2a27; }
  .legal p { margin: 0 0 14px; }
  .legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
  .legal li { margin-bottom: 6px; }
  .legal a { text-underline-offset: 3px; word-break: break-word; }
  /* footer: on the paper like everything else; links, the SOC 2 seal, then the small print */
  footer { border-top: 0; }
  footer a { color: inherit; }
  footer .wrap { padding-top: 28px; padding-bottom: 28px; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 28px; border-bottom: 1px solid var(--faint); font-size: 13px; }
  .foot-links a { text-decoration: none; color: var(--muted); }
  .foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .foot-seal { display: flex; align-items: center; gap: 24px; padding: 28px 0; }
  .foot-seal .seal img { display: block; width: 68px; height: auto; }
  .foot-seal p { margin: 0; display: grid; gap: 4px; }
  .foot-seal strong { font: var(--dw) 22px/1.15 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.02em * var(--dt)); }
  .foot-seal .mono { font-size: 12px; color: var(--muted); }
  .foot-seal .mono a { color: var(--ink); text-underline-offset: 3px; }
  .foot-end { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--faint); }
  .foot-end .plain { display: none; }   /* the painted page's voice line */
  @media (max-width: 900px) {
    .foot-links { gap: 10px 20px; }
    .foot-seal { gap: 16px; } .foot-seal .seal img { width: 54px; } .foot-seal strong { font-size: 19px; }
    .foot-end { flex-direction: column; gap: 4px; }
  }
  /* Industries menu in the header: opens on click (and on hover where there is a mouse) */
  .menu { position: relative; display: flex; align-items: center; }
  .menu-btn { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
  .menu-btn svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s; }
  .menu.open .menu-btn svg { transform: rotate(180deg); }
  .menu-list { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 240px; display: grid; padding: 8px 0; background: var(--paper);
    border: 1px solid var(--faint); box-shadow: 0 10px 30px rgba(17, 17, 17, .08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s .18s; z-index: 30; }
  .menu.open .menu-list { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
  .menu-list a { padding: 9px 16px; font-size: 14px; text-decoration: none; color: var(--ink); }
  .menu-list a:hover, .menu-list a:focus-visible { background: var(--faint); outline: none; }
  @media (hover: hover) { .menu:hover .menu-list { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; } .menu:hover .menu-btn svg { transform: rotate(180deg); } }
  .menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }   /* keeps the hover alive across the gap */

/* ======================================================================================
   The launch post
   ====================================================================================== */
.lb { --accent: #10A9B0; --thread: #0E9AA1; --sheet: #FFFDF8; --card: #FBF8F1; --wick: #C9A46A; --wick-dark: #8C6A36;
  --weave: repeating-linear-gradient(0deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .07) 0 1px, transparent 1px 3px); }
.lb .rs-post { gap: 56px; }
.lb .prose h2, .lb .prose h3 { margin-top: 28px; }
.lb .prose h3 { font: var(--dw) 32px/1.1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.03em * var(--dt)); margin-bottom: 0; }

/* the post's two parts, headed as the Brand and About pages head their sections: a mono number and label,
   then the heading painted onto its own brush-edged patch of the abstract painting, under a full rule */
.lb .rs-post .lb-part { max-width: calc(680px + 2 * var(--gutter)); width: 100%; margin: 0 auto; }
.lb-part { position: relative; padding-top: 28px; }
.lb-part::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--ink); }   /* the rule spans the text column, not the gutters */
.lb-part + * { margin-top: -8px; }
.lb-part .mono { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.lb-part h2 { margin: 0; font: var(--dw) clamp(40px, 4.6vw, 64px)/1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.045em * var(--dt)); }
.lb-stroke { position: relative; display: inline-block; z-index: 0; }
.lb-stroke::after { content: ""; position: absolute; z-index: -1; left: -.22em; right: -.3em; top: .08em; bottom: -.1em;
  background: url(/painted/images/cookie-paint.webp) var(--sp, 30% 40%) / 340% auto no-repeat; opacity: .78;
  -webkit-mask: url(/painted/masks/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/masks/panel.png) 0 0 / 100% 100% no-repeat; }
#solution { margin-top: 56px; }
.lb-note { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.lb-note a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.lb button { font: 400 12px/1 var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 8px 11px; cursor: pointer; }
.lb button:hover { background: var(--card); }
.lb button:disabled { opacity: .35; cursor: default; }
.lb button:focus-visible, .lb summary:focus-visible, .lb a:focus-visible, .fb-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb .mono { letter-spacing: 0; }

/* ---- the opening, drawn like the homepage's hero band: the question card, then the band of squares and the moment ---- */
.lb-ask { width: 100%; margin: 0 auto; display: grid; gap: 12px; }
.ask-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 40px; align-items: center; }
.ask-card { position: relative; border: 1px solid var(--ink); background: var(--paper); padding: 16px 18px 18px; }
.ask-card::after { content: ""; position: absolute; right: -40px; top: 50%; width: 40px; border-top: 1.5px dashed var(--thread); }   /* the question reaching into the band */
.ask-card .who { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.ask-card .q { margin: 0; font: var(--dw) 22px/1.2 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); }
.ask-band { position: relative; padding-bottom: 26px; }
.ask-band canvas { display: block; width: 100%; }
.ask-marks span { position: absolute; bottom: 0; height: 18px; border-top: 1px solid var(--ink); padding-top: 4px; text-align: center; font: 400 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.ask-marks [data-k="mM"] { color: var(--ink); border-top-width: 2px; }
.ask-marks [data-k="mB"], .ask-marks [data-k="mA"] { border-top-style: dashed; }
.lb-ask .pen { margin: 0; justify-self: end; font: italic 400 14px/1.4 var(--sans); color: var(--muted); }
.lb-ask .pen::before { content: "— "; }
@media (max-width: 760px) {
  .ask-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ask-card::after { right: auto; left: 50%; top: 100%; width: 0; height: 24px; border-top: 0; border-left: 1.5px dashed var(--thread); }
  .lb-ask .pen { justify-self: start; }
}

/* ---- the can of worms: a 600 x 600 page in the scrolling figure; its panels cross-fade by step ---- */
.wm-world { position: absolute; left: 0; top: 0; width: 600px; height: 600px; transform-origin: 0 0; }
.wm-world > * { position: absolute; transition: opacity .5s, transform .6s cubic-bezier(.3, .1, .2, 1); }
.wm-tag { font-size: 10px; color: var(--muted); }
.wm-doc { left: 24px; top: 24px; width: 330px; height: 400px; padding: 18px 20px; box-sizing: border-box;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"), linear-gradient(170deg, #FFFCF4, #F6EFDF);
  border: 1px solid rgba(120, 100, 70, .28); box-shadow: 0 1px 1px rgba(17, 17, 17, .06), 0 8px 18px rgba(17, 17, 17, .1); }
.wm-doc h4 { margin: 8px 0 0; font: var(--dw) 22px/1 var(--display); font-variation-settings: var(--dfv); }
.wm-line { position: absolute; left: 30px; right: 74px; margin: 0; font: 400 14px/28px var(--sans); color: var(--ink); z-index: 1; }
.wm-band { position: absolute; z-index: 0; opacity: .34; transition: top .6s cubic-bezier(.3, .1, .2, 1), height .6s cubic-bezier(.3, .1, .2, 1); mix-blend-mode: multiply; }
.wm-blab { position: absolute; right: 8px; font-size: 9px; color: var(--muted); transition: top .6s cubic-bezier(.3, .1, .2, 1); }
.wm-cut { position: absolute; left: 10px; right: 10px; top: 288px; border-top: 2px dashed #9A3B2C; opacity: 0; transition: opacity .4s; z-index: 2; }
.wm-cutnote { position: absolute; right: 12px; top: 294px; font: italic 400 13px var(--sans); color: #9A3B2C; opacity: 0; transition: opacity .4s; z-index: 2; background: rgba(255, 252, 244, .9); padding: 0 4px; }
.wm-knobs { left: 374px; top: 24px; width: 202px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--ink); box-sizing: border-box; }
.wm-knobs p.mono { margin: 0 0 8px; font-size: 10px; color: var(--muted); }
.wm-knobs dl { margin: 0 0 14px; display: grid; gap: 7px; }
.wm-knobs dl div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--faint); padding-bottom: 5px; }
.wm-knobs dt { font: 400 11px var(--mono); color: var(--muted); }
.wm-knobs dd { margin: 0; font: italic 400 13px var(--sans); }
.wm-ctx { position: relative; display: flex; gap: 3px; height: 22px; padding: 3px; border: 1px solid var(--ink); }
.wm-ctx i { flex: 0 0 24%; opacity: .6; }
.wm-ctx b { position: absolute; right: 6px; top: 3px; font: italic 400 12px var(--sans); color: var(--muted); }
.wm-q { left: 374px; top: 210px; width: 202px; padding: 10px 14px 12px; background: var(--paper); border: 1px solid var(--ink); display: grid; gap: 4px; box-sizing: border-box; }
.wm-q .mono { font-size: 10px; color: var(--muted); }
.wm-q b { font: var(--dw) 19px/1.15 var(--display); font-variation-settings: var(--dfv); }
.wm-verdict { left: 24px; top: 446px; width: 552px; display: grid; gap: 8px; }
.wm-verdict span { padding: 7px 10px; font: 400 12px/1.3 var(--mono); border: 1px solid var(--ink); background: var(--paper); }
.wm-verdict .ok { background: var(--cyan-paint); color: #111; justify-self: start; }
.wm-verdict .miss::before { content: ""; }
.wm-embed { left: 0; top: 0; width: 600px; height: 600px; }
.wm-embed .wm-tag { position: absolute; left: 24px; top: 24px; }
.wm-field i { position: absolute; width: 12px; height: 12px; border-radius: 3px; opacity: .45; }
.wm-pt { position: absolute; width: 18px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ink); z-index: 2; }
.wm-pt.a, .wm-pt.c { background: #9FB096; } .wm-pt.b, .wm-pt.d { background: #D98C78; }
.wm-lab { position: absolute; z-index: 2; padding: 4px 8px; font: italic 400 14px var(--sans); background: var(--paper); border: 1px solid var(--ink); white-space: nowrap; }
.wm-note { position: absolute; z-index: 2; font: 400 11px var(--mono); color: var(--ink); background: rgba(242, 240, 235, .92); padding: 2px 6px; }
.wm-note.r { left: 40px; top: 306px; } .wm-note.v { left: 330px; top: 470px; }
.wm-embed .v, .wm-embed .c, .wm-embed .d { opacity: 0; transition: opacity .5s; }
.wm-stack { left: 0; top: 0; width: 600px; height: 600px; }
.wm-stack .wm-tag { position: absolute; left: 24px; top: 24px; }
.wm-stack ol { position: absolute; left: 24px; top: 52px; width: 300px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wm-stack li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--paper); border: 1px solid var(--ink); font: var(--dw) 17px/1 var(--display); font-variation-settings: var(--dfv);
  transition: opacity .45s calc(var(--i) * 60ms), transform .45s calc(var(--i) * 60ms); }
.wm-stack li.add { background: #F5E6C8; }
.wm-stack li em { font-size: 10px; font-style: normal; color: #9A3B2C; }
.wm-pile { position: absolute; left: 352px; top: 52px; width: 224px; }
.wm-pile p { margin: 0 0 10px; font-size: 10px; color: var(--muted); }
.wm-pile div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wm-pile i { height: 46px; background: linear-gradient(170deg, #FFFCF4, #F1E8D4); border: 1px solid rgba(120, 100, 70, .35); box-shadow: 0 2px 4px rgba(17, 17, 17, .06);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, rgba(17, 17, 17, .12) 7px 8px); background-size: 70% 100%; background-repeat: no-repeat; background-position: 6px 6px;
  transition: opacity .35s calc(var(--i) * 40ms); }
/* which panel shows at which step */
.lb-worms .wm-embed, .lb-worms .wm-stack, .lb-worms .wm-q, .lb-worms .wm-verdict { opacity: 0; pointer-events: none; }
.lb-worms [data-step="2"] .wm-doc, .lb-worms [data-step="3"] .wm-doc, .lb-worms [data-step="4"] .wm-doc,
.lb-worms [data-step="2"] .wm-knobs, .lb-worms [data-step="3"] .wm-knobs, .lb-worms [data-step="4"] .wm-knobs, .lb-worms [data-step="5"] .wm-knobs { opacity: 0; }
.lb-worms [data-step="2"] .wm-embed, .lb-worms [data-step="3"] .wm-embed { opacity: 1; }
.lb-worms [data-step="3"] .wm-embed .v, .lb-worms [data-step="3"] .wm-embed .c, .lb-worms [data-step="3"] .wm-embed .d { opacity: 1; }
.lb-worms [data-step="4"] .wm-stack { opacity: 1; }
.lb-worms .wm-stack li, .lb-worms .wm-pile i:not(.few) { opacity: 0; transform: translateY(6px); }
.lb-worms [data-step="4"] .wm-stack li:not(.add), .lb-worms [data-step="4"] .wm-stack li.add, .lb-worms [data-step="4"] .wm-pile i { opacity: 1; transform: none; }
.lb-worms [data-step="1"] .wm-cut, .lb-worms [data-step="1"] .wm-cutnote { opacity: 1; }
.lb-worms [data-step="5"] .wm-q, .lb-worms [data-step="5"] .wm-verdict { opacity: 1; }
.lb-worms [data-step="5"] .wm-band.k0 { opacity: .55; box-shadow: 0 0 0 2.5px #0BD3D8, 0 0 0 3.5px var(--ink); mix-blend-mode: normal; }
.lb-worms [data-step="5"] .wm-band:not(.k0) { opacity: .12; }
@media (max-width: 1000px) { .lb-worms .lb-stage { aspect-ratio: 1; max-height: 80vh; } }

/* ---- the scrolling figures: paragraphs on the left, the figure held beside them on the right ---- */
.lb-scrolly { max-width: calc(1240px + 2 * var(--gutter)); width: 100%; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: start; }
.lb-steps { display: grid; }
.lb-steps h2, .lb-steps h3 { margin: 18px 0 8px; font: var(--dw) 32px/1.1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.03em * var(--dt)); }
.lb-scrolly .lb-step { display: grid; gap: 20px; align-content: center; min-height: 58vh; }
.lb-scrolly .lb-step:last-child { min-height: 72vh; }
.lb-js .lb-scrolly .lb-step p { transition: color .3s; }
@media (min-width: 1001px) { .lb-js .lb-scrolly .lb-step:not(.on) p { color: var(--muted); } }
.lb-fig { position: sticky; top: 72px; margin: 0; height: calc(100vh - 92px); min-height: 560px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; gap: 10px; }
.lb-stage { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--ink); min-height: 0; }
.lb-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--weave); mix-blend-mode: multiply; }
.lb-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-ctrl [data-k="prev"], .lb-ctrl [data-k="next"] { min-width: 34px; font-size: 16px; padding: 5px 10px; }
.lb-say { flex: 1; min-width: 200px; margin: 0; font: 400 14px/1.35 var(--sans); }
.lb-replay { background: var(--cyan-paint) !important; color: #111 !important; }
.lb-zoom { display: inline-flex; }
.lb-zoom button { margin-left: -1px; min-width: 34px; }
.lb-text { font-size: 14px; line-height: 1.55; }
.lb-text summary { cursor: pointer; font: 400 12px var(--mono); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; width: max-content; }
.lb-text[open] { max-height: 34vh; overflow: auto; padding-right: 8px; }
.lb-text p, .lb-text ol, .lb-text ul { margin: 10px 0 0; }
.lb-text li { margin-bottom: 6px; }
.lb-text em { color: var(--muted); }
@media (max-width: 1000px) {
  .lb-scrolly { grid-template-columns: minmax(0, 1fr); max-width: calc(680px + 2 * var(--gutter)); gap: 20px; }
  .lb-scrolly .lb-step, .lb-scrolly .lb-step:last-child { min-height: 0; }
  .lb-steps { gap: 20px; }
  .lb-fig { position: static; height: auto; min-height: 0; grid-template-rows: auto; }
  .lb-trash .lb-stage { aspect-ratio: 6 / 7; max-height: 78vh; }
  .lb-fab .lb-stage { aspect-ratio: 4 / 5; max-height: 80vh; }
  .lb-text[open] { max-height: none; }
}

/* ---- the trashcan: a 600 x 700 drawing, scaled to the stage ---- */
.tr-world { position: absolute; left: 0; top: 0; width: 600px; height: 700px; transform-origin: 0 0; }
.tr-world > * { position: absolute; left: 0; top: 0; }
.tr-basket, .tr-links, .tr-anns { width: 600px; height: 700px; pointer-events: none; }
.tr-links svg, .tr-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-basket { transform-origin: 300px 680px; transition: transform .8s cubic-bezier(.3, .1, .2, 1), opacity .4s; opacity: 0; }
.tr-basket img { position: absolute; left: 170px; top: 430px; width: 260px; height: 260px; display: block; }
.tr-basket.back { z-index: 1; } .tr-basket.front { z-index: 3; }
.tr-basket.back img { filter: drop-shadow(0 10px 12px rgba(17, 17, 17, .16)); }
.lb-stage:not([data-step="0"]) .tr-basket { opacity: 1; }
.lb-stage[data-step="5"] .tr-basket { transform: scale(1.25); }
.tr-links { z-index: 4; transition: opacity .4s; }
.tr-links path { fill: none; stroke: var(--thread); stroke-width: 1.8; stroke-dasharray: 5 4; }
.tr-links text { font: 400 11px var(--mono); fill: var(--thread); paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.lb-stage:not([data-step="0"]) .tr-links { opacity: 0; }

.tr-page { width: 168px; height: 220px; z-index: 2; transform-origin: 50% 50%; transition: transform .95s cubic-bezier(.55, .05, .3, 1); }
.tr-sheet { position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"), linear-gradient(170deg, #FFFCF4, #F6EFDF);
  border: 1px solid rgba(120, 100, 70, .28); box-shadow: 0 1px 1px rgba(17, 17, 17, .06), 0 8px 18px rgba(17, 17, 17, .1); padding: 12px 13px; font: 400 12px/1.45 var(--sans); color: var(--ink); overflow: hidden; transition: opacity .3s .25s; }
.tr-sheet .pg { position: absolute; right: 10px; bottom: 8px; font-size: 9px; color: var(--muted); }
.tr-sheet h4, .fb-r h4 { margin: 0 0 8px; font: var(--dw) 17px/1.1 var(--display); font-variation-settings: var(--dfv); }
.tr-sheet p, .fb-r p { margin: 0 0 6px; }
.tr-sheet ol, .fb-r ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.tr-sheet .warn, .fb-r .warn { border: 1px solid var(--ink); padding: 6px 8px; background: #F5E6C8; font-style: italic; }
.tr-sheet .warn span, .fb-r .warn span { font-size: 9px; vertical-align: 1px; }
.diag { display: block; width: 100%; height: auto; }
.tr-sheet .pic, .fb-r .pic { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 2px 0 4px; box-shadow: 0 0 0 1px rgba(120, 100, 70, .25); }
.diag rect, .diag circle { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.diag path { fill: none; stroke: var(--muted); stroke-width: .8; }
.diag text { font: 400 8px var(--mono); fill: var(--muted); }
.diag .flame { stroke: #C9962F; stroke-width: 1.4; }
.diag .hill { stroke: var(--faint); stroke-width: 6; } .diag .road { stroke: #C9962F; stroke-width: 1.6; stroke-dasharray: 3 2; }
.tr-wad { position: absolute; left: 0; top: 26px; width: 168px; height: 176px; opacity: 0; transition: opacity .25s; }
.tr-wad i { position: absolute; inset: -6%; background: url(/painted/research/understanding-our-world/ball-1.webp) center / contain no-repeat; filter: drop-shadow(0 4px 5px rgba(17, 17, 17, .14)) brightness(1.06); }
.tr-wad i.b2 { background-image: url(/painted/research/understanding-our-world/ball-2.webp); }
.tr-wad i.b3 { background-image: url(/painted/research/understanding-our-world/ball-3.webp); }
.tr-page.ball .tr-sheet { opacity: 0; transition-delay: 0s; transition-duration: .2s; }
.tr-page.ball .tr-wad { opacity: 1; transition-delay: .15s; }
.tr-page.found .tr-sheet { box-shadow: 0 0 0 3px #0BD3D8, 0 0 0 4px var(--ink), 0 10px 24px rgba(17, 17, 17, .14); }
.tr-extra { width: 168px; height: 220px; z-index: 2; opacity: 0; transition: opacity .5s .3s; }
.tr-extra .tr-wad { opacity: 1; }
.lb-stage[data-step="5"] .tr-extra { opacity: 1; }
.tr-strip { z-index: 2; width: 150px; padding: 8px 10px; background: var(--sheet); border: 1px solid rgba(17, 17, 17, .45); opacity: 0; transition: opacity .4s .5s; }
.tr-strip span { font-size: 11px; }
.lb-stage[data-step="5"] .tr-strip { opacity: 1; }
@keyframes rummage { 0%, 100% { transform: none; } 25% { transform: rotate(9deg) translate(2px, -3px); } 60% { transform: rotate(-7deg) translate(-2px, 1px); } }
.rummage .tr-page.ball .tr-wad, .rummage .tr-extra .tr-wad { animation: rummage .5s ease-in-out .7s 3; }
.tr-q { z-index: 5; left: 110px !important; top: 16px !important; width: 380px; padding: 10px 14px 12px; background: var(--paper); border: 1px solid var(--ink); display: grid; gap: 4px; opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s; }
.tr-q .mono { font-size: 10px; color: var(--muted); }
.tr-q b { font: var(--dw) 22px/1.15 var(--display); font-variation-settings: var(--dfv); }
.tr-q .tr-k:empty { display: none; }
.lb-stage[data-step="2"] .tr-q, .lb-stage[data-step="3"] .tr-q, .lb-stage[data-step="4"] .tr-q, .lb-stage[data-step="5"] .tr-q { opacity: 1; transform: none; }
.tr-anns { z-index: 6; }
.tr-ann { position: absolute; padding: 5px 9px; font: 400 12px/1.2 var(--mono); border: 1px solid var(--ink); background: var(--paper); opacity: 0; transition: opacity .4s; white-space: nowrap; }
.tr-ann.ok { left: 222px; top: 346px; background: var(--cyan-paint); color: #111; }
.tr-ann[data-a="warn"] { left: 14px; top: 606px; }
.tr-ann[data-a="exc"] { right: 14px; top: 606px; }
.tr-ann.miss::before { content: "✕ "; }
.tr-lead path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity .4s; }
.lb-stage[data-step="4"] .tr-ann, .lb-stage[data-step="5"] .tr-ann, .lb-stage[data-step="4"] .tr-lead path, .lb-stage[data-step="5"] .tr-lead path { opacity: 1; }
.lb-stage[data-step="5"] .tr-ann.ok { top: 332px; }

/* ---- the founders' photograph: a picture in an essay ---- */
.lb .lb-bar { font-size: 20px; }
.lb-photo { max-width: calc(880px + 2 * var(--gutter)); width: 100%; margin: 0 auto; display: grid; gap: 12px; }
.lb-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--faint); }
.lb-photo figcaption { font-size: 15px; color: var(--muted); border-left: 2px solid var(--ink); padding-left: 12px; }
.lb-photo.pre { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
.lb-photo.pre.in { opacity: 1; transform: none; }

/* ---- the fabric: a 1800 x 1180 world of patches, moved by a camera ---- */
.lb-cloth { background: #E9E3D6; cursor: grab; touch-action: pan-y; }
.lb-cloth.panning { cursor: grabbing; }
.lb-cloth::after { background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .1) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .1) 0 1px, transparent 1px 4px); }
.fb-world { position: absolute; left: 0; top: 0; width: 1800px; height: 1180px; transform-origin: 0 0; transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.panning .fb-world { transition: none; }
.fb-patch { position: absolute; display: flex; flex-direction: column; background: var(--sheet); color: var(--ink); font: 400 13px/1.45 var(--sans);
  outline: 1.5px dashed color-mix(in srgb, var(--tone) 70%, #111 30%); outline-offset: -7px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 55%, var(--sheet)), 0 3px 10px rgba(17, 17, 17, .12);
  transition: opacity .6s, transform .6s, filter .4s; }
.fb-patch header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; border-bottom: 1px solid var(--faint); }
.fb-patch header i { width: 10px; height: 10px; flex: none; }
.fb-patch header .mono { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-body { padding: 12px 16px 14px; display: grid; gap: 8px; align-content: start; min-height: 0; overflow: hidden; }
.fb-body p { margin: 0; }
.fb-patch.off { opacity: 0; transform: scale(.96); pointer-events: none; }
.fb-patch.dim { opacity: .38; filter: saturate(.4); }
.fb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fb-cols > div { display: grid; gap: 12px; align-content: start; }
.fb-r { position: relative; padding: 8px 10px; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
section.fb-r { border-color: rgba(17, 17, 17, .14); background: #FFFEFB; }
section.fb-r .pg { float: right; font-size: 10px; color: var(--muted); }
.fb-r.on, .fb-r .on, .fb-end-on { background: rgba(16, 169, 176, .16) !important; border-color: var(--thread) !important; box-shadow: inset 0 0 0 1px var(--thread); }
.fb-r .on, li.on, p.on { border-radius: 2px; }
@keyframes flash { 0%, 100% { box-shadow: inset 0 0 0 1px var(--thread); } 50% { box-shadow: inset 0 0 0 4px #0BD3D8; } }
.fb-r.flash { animation: flash .6s ease 2; }
.fb-photo { margin: 6px 0; padding: 8px 8px 26px; background: #FFFDF8; box-shadow: 0 0 0 1px rgba(17, 17, 17, .15), 0 3px 8px rgba(17, 17, 17, .12); }
.fb-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: sepia(.18); }
.fb-cap { font: 400 11px var(--mono); color: var(--muted); }
.fb-line { padding: 4px 6px; }
.fb-line .mono { font-size: 11px; color: var(--muted); }
.fb-still { position: relative; }
.fb-still svg, .fb-still img { display: block; width: 100%; height: auto; }
.fb-still img { aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 30%; }
.fb-still .bg { fill: #9FB096; } .fb-still .stove { fill: #3B3424; } .fb-still .pot { fill: #668F95; stroke: #2B2A27; stroke-width: 2; }
.fb-still .rim { stroke: #2B2A27; stroke-width: 5; stroke-linecap: round; } .fb-still .spoon { stroke: #C9962F; stroke-width: 5; stroke-linecap: round; }
.fb-still .mono { position: absolute; right: 6px; bottom: 6px; font-size: 10px; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 5px; }
.fb-events { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.fb-events li { padding: 4px 6px; border-left: 3px solid var(--t0); }
.fb-events .mono { font-size: 11px; color: var(--muted); margin-right: 4px; }
.fb-sheet { border-collapse: collapse; width: 100%; font: 400 12px var(--mono); }
.fb-sheet th, .fb-sheet td { border: 1px solid #CFC9BC; padding: 5px 7px; text-align: left; }
.fb-sheet th { background: #ECE7DC; font-weight: 500; }
.fb-small { font-size: 11px; }
.fb-ph { height: 100px; background: linear-gradient(170deg, #9DB8C9 0 45%, #9FB096 45% 100%); display: grid; place-items: end start; padding: 8px; }
.fb-ph span { font: 400 11px var(--mono); background: var(--sheet); padding: 2px 5px; }

.fb-threads { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fb-t { pointer-events: auto; cursor: pointer; transition: opacity .5s; outline: none; }
.fb-t.off { opacity: 0; pointer-events: none; }
.fb-t .hit { fill: none; stroke: transparent; stroke-width: 16; }
.fb-t .st { fill: none; stroke: var(--thread); stroke-width: 2.6; stroke-dasharray: 9 6; stroke-linecap: round; transition: stroke-width .2s, stroke .2s; }
.fb-t .end { fill: var(--thread); }
.fb-t.far .st { stroke: rgba(17, 17, 17, .38); stroke-width: 2; }
.fb-t.far .end { fill: rgba(17, 17, 17, .45); }
.focus .fb-t:not(.hot) { opacity: .14; }
.fb-t.hot .st, .fb-t.lit .st { stroke: #08B7BC; stroke-width: 5; stroke-dasharray: none; }
.fb-t.lit .st { stroke-width: 6; }
.fb-t:focus-visible .st { stroke: var(--ink); stroke-width: 5; stroke-dasharray: none; }
.far .fb-t .st { stroke-width: 4; } .far .fb-t.hot .st, .far .fb-t.lit .st { stroke-width: 8; }

.fb-q, .fb-ov, .fb-ev, .fb-chip { position: absolute; z-index: 5; }
.fb-q { left: 14px; top: 14px; padding: 8px 12px 10px; background: var(--paper); border: 1px solid var(--ink); display: grid; gap: 2px; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; pointer-events: none; }
.fb-q .mono { font-size: 10px; color: var(--muted); }
.fb-q b { font: var(--dw) 19px/1.15 var(--display); font-variation-settings: var(--dfv); }
.fb-q.on { opacity: 1; transform: none; }
.fb-ov { right: 14px; bottom: 14px; width: 196px; padding: 10px; background: var(--paper); border: 1px solid var(--ink); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.fb-ov.on { opacity: 1; visibility: visible; transition: opacity .4s; }
.fb-ov .mono { margin: 0 0 6px; font-size: 10px; color: var(--muted); }
.fb-ov-m { position: relative; aspect-ratio: 1; }
.fb-ov-m svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fb-ov-m rect { fill: #0B8F96; stroke: var(--paper); stroke-width: .6; }
.fb-ov-m button { position: absolute; padding: 0; background: transparent !important; border: 1.5px solid transparent; display: grid; place-items: center; }
.fb-ov-m button span { font: 400 9px/1.1 var(--mono); color: var(--paper); background: rgba(17, 17, 17, .72); padding: 2px 4px; text-align: center; max-width: 92%; }
.fb-ov-m button:hover, .fb-ov-m button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px #0BD3D8; }
.fb-ev { left: 14px; bottom: 14px; width: min(360px, calc(100% - 238px)); padding: 10px 12px; background: var(--paper); border: 1px solid var(--ink); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.fb-ev.on { opacity: 1; visibility: visible; transition: opacity .4s .3s; }
.fb-ev .mono { margin: 0 0 6px; font-size: 10px; color: var(--muted); }
.fb-ev ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: ev; }
.fb-ev li { counter-increment: ev; }
.fb-ev button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 6px 8px 6px 30px; position: relative; font: 400 13px/1.3 var(--sans) !important; border-color: rgba(17, 17, 17, .3) !important; }
.fb-ev button::before { content: counter(ev); position: absolute; left: 8px; top: 7px; width: 15px; height: 15px; display: grid; place-items: center; font: 500 9px var(--mono); background: var(--ink); color: var(--paper); border-radius: 22%; }
.fb-ev button .mono { margin: 0; font-size: 10px; }
.fb-ev q { quotes: "“" "”"; }
.fb-chip { max-width: 280px; transform: translate(-50%, -130%); padding: 6px 9px; font: 400 12px/1.35 var(--sans); background: var(--ink); color: var(--paper); pointer-events: none; opacity: 0; transition: opacity .2s; }
.fb-chip.on { opacity: 1; }
.lb-thread-say { min-height: 1.4em; font: 400 13px/1.4 var(--sans); }
.lb-thread-say:empty { display: none; }
@media (max-width: 700px) {
  .fb-ov { width: 140px; padding: 8px; }
  .fb-ev { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .lb-stage[data-step="6"] .fb-ov { display: none; }   /* the evidence takes the foot of a phone's stage */
  .fb-q { left: 8px; top: 8px; } .fb-q b { font-size: 16px; }
}

/* ---- results: the homepage's benchmarks (styled by src/styles/bench.css), under a section head as on About ---- */
.lb-bench { max-width: calc(1180px + 2 * var(--gutter)); width: 100%; margin: 0 auto; padding-top: 40px; border-top: 1px solid var(--faint); }
.lb-bench > .mono { margin: 0; font-size: 12px; color: var(--muted); }
.lb-bench > h2, .lb-bench > h3 { margin: 14px 0 16px; font: var(--dw) clamp(28px, 2.8vw, 40px)/1.08 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.03em * var(--dt)); }
.lb-bench .bench-lede { max-width: 760px; margin: 0 0 40px; font-size: 19px; line-height: 1.45; }

/* ---- the funding line: the sentence itself, set large ---- */
.lb .prose p.lb-announce { margin: 18px 0; padding: 0; font: var(--dw) clamp(23px, 2.4vw, 29px)/1.32 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.02em * var(--dt)); }

/* ---- the developer view: a bucket, the search modes, a query and its evidence ---- */
.lb-dev { max-width: calc(940px + 2 * var(--gutter)); width: 100%; margin: 0 auto; display: grid; gap: 12px; }
.lb-win { border: 1px solid var(--ink); background: var(--card); box-shadow: 0 12px 36px rgba(17, 17, 17, .1); }
.lb-win-bar { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ink); background: var(--paper); }
.lb-win-bar .mono { font-size: 11px; color: var(--muted); }
.lb-win-bar b { font: var(--dw) 18px var(--display); font-variation-settings: var(--dfv); }
.lb-win-n { margin-left: auto; }
.lb-win-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 300px; }
.lb-objs { margin: 0; padding: 12px 0; list-style: none; border-right: 1px solid var(--faint); font: 400 12px/1 var(--mono); }
.lb-objs li { display: flex; align-items: center; gap: 9px; padding: 9px 14px; }
.lb-objs i { width: 10px; height: 10px; background: var(--tone); flex: none; }
.lb-objs .lb-more { color: var(--muted); font-size: 11px; }
.lb-search { padding: 14px 18px 18px; display: grid; gap: 12px; align-content: start; }
.lb-q { margin: 0; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--ink); font: var(--dw) 18px/1.3 var(--display); font-variation-settings: var(--dfv); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-q .mono { font: 400 10px var(--mono); color: var(--muted); }
.lb-qimg { display: inline-grid; place-items: center; width: 92px; height: 40px; font: 500 9px var(--mono); background: linear-gradient(160deg, #C9CFD2, #9FA8AD); border: 1.5px solid #5E676C; color: #1C2326; }
.lb-hits { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: hit; }
.lb-hits li { counter-increment: hit; position: relative; padding: 8px 10px 8px 34px; background: var(--paper); border: 1px solid var(--faint); font-size: 14px; line-height: 1.45; }
.lb-hits li::before { content: counter(hit); position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; display: grid; place-items: center; font: 500 9px var(--mono); background: var(--ink); color: var(--paper); border-radius: 22%; }
.lb-hits b { font: 400 12px var(--mono); }
.lb-hits q { display: block; margin-top: 2px; }
.lb-hits .mono { font-size: 11px; color: var(--thread); }
.lb-path li { border-left: 3px solid #0BD3D8; }
@media (max-width: 760px) {
  .lb-win-body { grid-template-columns: minmax(0, 1fr); }
  .lb-objs { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--faint); padding: 8px 0; }
  .lb-objs li { padding: 7px 12px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .lb-objs i { display: inline-block; vertical-align: -1px; margin-right: 6px; }
  .lb-search { padding: 12px; }
}

/* ---- the ending: the homepage's "Memory that persists." with the stray square's slot, then the way in ---- */
.lb .ind-end .row { gap: 24px; }
.lb .ind-end .btn { height: 46px; padding: 0 22px; font: var(--dw) 18px/1.2 var(--display); font-variation-settings: var(--dfv); }
.lb-docs { font: var(--dw) 18px/1.2 var(--display); font-variation-settings: var(--dfv); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* One wide frame for the whole post, the width of the results section. research.css holds the posts' sections to
   680px or 1040px; here every section shares the 1180px frame and its left edge. Text keeps a reading measure
   inside it, set on the left as the results' lede is; the figures, the photo, the mockup and the part rules span it. */
.lb { --frame: calc(1180px + 2 * var(--gutter)); --measure: none; }
.lb .rs-hero .wrap, .lb .rs-post .wrap, .lb .ind-end.wrap { max-width: var(--frame); }
.lb .rs-post .prose.wrap > *, .lb .lb-steps > * { max-width: var(--measure); }
.lb .rs-hero h1 { max-width: 1000px; }
.lb .prose p.lb-announce { max-width: none; }
/* text runs the width of the frame, so it is set a size up to keep long lines easy to follow */
@media (min-width: 1001px) { .lb .prose p { font-size: 20px; line-height: 1.7; } .lb .prose p.lb-announce { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.32; } }
.lb .rs-post .lb-part .mono, .lb .rs-post .lb-part h2 { max-width: none; }
.lb .lb-photo img { max-height: 78vh; }
.lb .lb-scrolly { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 64px; }
/* shorter steps, so two figures in a row are not a long scroll */
@media (min-width: 1001px) { .lb .lb-scrolly .lb-step { min-height: 40vh; } .lb .lb-scrolly .lb-step:last-child { min-height: 52vh; } }

/* a figure's heading that runs the full width of the frame, above its text and its picture */
.lb .lb-scrolly > .lb-wide { grid-column: 1 / -1; margin: 0 0 8px; max-width: none; font: var(--dw) clamp(32px, 3.6vw, 48px)/1.08 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.035em * var(--dt)); }
/* one word in the brand's painted cyan */
.lb-cy { background: linear-gradient(100deg, #00ECF0 0%, #0BD3D8 38%, #10B4BB 72%, #16A0A8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1000px) { .lb .lb-scrolly { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .lb *, .lb *::before, .lb *::after { transition: none !important; animation: none !important; }
}


/* a formula in the prose: upright, with its variables in italic */
.lb-math { white-space: nowrap; font-variant-numeric: lining-nums; }
.lb-math i { font-style: italic; }

/* the opening paragraphs, set as a lede: a size up, so they fill the frame's width over a few lines each,
   and closer together, so they read as one opening rather than separate lines */
.lb .prose.lb-lede { gap: 14px; }
@media (min-width: 1001px) { .lb .prose.lb-lede p { font-size: 25px; line-height: 1.55; letter-spacing: -.005em; } }
@media (max-width: 1000px) { .lb .prose.lb-lede p { font-size: 20px; line-height: 1.6; } }

/* the line under the title */
.lb .rs-hero .lb-sub { margin: 14px 0 0; font: var(--dw) clamp(20px, 2vw, 26px)/1.25 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); text-shadow: 0 0 18px var(--paper), 0 0 2px var(--paper); }

/* The page shows once this sheet has applied (brand.css hides it until then). */
.painted.painted { visibility: visible; }   /* doubled, so it wins whichever sheet loads last */

/* the Series A lead: right under the byline, centred */
.lb .prose.lb-lead { margin-top: -40px; }
.lb .prose.lb-lead p.lb-announce { margin: 0 auto; max-width: none; text-align: center; text-wrap: wrap;   /* like a doc's centring: full lines, the last one centred */
  font: 400 clamp(18px, 1.6vw, 22px)/1.6 var(--sans); font-variation-settings: normal; letter-spacing: 0; }   /* the body's regular type, a size up, not the display serif */
.lb .lb-lead + .lb-part::before { content: none; }   /* no rule between the Series A lead and 01 · motivation */