/* Finding My Purpose — on top of /blog/assets/blog.css */
.fmp { --wide: 54rem; }
.fmp .kicker time { letter-spacing: .12em; }
.fmp .hero { margin: 1.6rem 0 0; }
.fmp .hero img { display: block; margin: 0 auto; width: min(100%, calc(22rem * var(--ar))); height: auto; border-radius: 4px; box-shadow: 0 1px 0 var(--rule); }
.fmp .glance { margin: 1.8rem 0 0; padding: .85rem 1.1rem .9rem; background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; font: 400 1rem/1.55 var(--sans); }
.fmp .glance h2 { font: 500 .78rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .35rem; }
.fmp .glance ul { margin: 0; padding: 0; list-style: none; }
.fmp .glance strong { font-weight: 500; }
.fmp .body h2 { scroll-margin-top: calc(var(--hdr) + 12px); }
.fmp .body h3 { scroll-margin-top: calc(var(--hdr) + 12px); }
/* photos sit inside the text column and stay modest: the words are the story, the pictures are context.
   Every photo is drawn at a set height (--ph-h) unless the column is narrower; tap any of them to see it full screen. */
.fmp { --ph-h: 18rem; }
@media (max-width: 700px) { .fmp { --ph-h: 11rem; } }
/* on wider screens a lone photo sits beside the words instead of between them */
@media (min-width: 760px) {
  .fmp .body .ph.landscape, .fmp .body .ph.portrait, .fmp .body .ph.square, .fmp .body .ph.small {
    float: right; clear: right; width: min(42%, calc(15rem * var(--ar))); margin: .35rem 0 1rem 1.5rem; text-align: left; }
  .fmp .body .ph.landscape img, .fmp .body .ph.portrait img, .fmp .body .ph.square img, .fmp .body .ph.small img { width: 100%; }
  .fmp .body .ph.landscape figcaption, .fmp .body .ph.portrait figcaption, .fmp .body .ph.square figcaption, .fmp .body .ph.small figcaption { margin: .4rem 0 0; padding: 0; font-size: .85rem; line-height: 1.4; }
  .fmp .body h2, .fmp .body h3, .fmp .body .ph.pair, .fmp .body .ph.gallery, .fmp .body .ph.strip, .fmp .body .ph.logo, .fmp .body .tt-wrap, .fmp .body .xpost, .fmp .end { clear: both; }
  .fmp .body .ph.pair { --ph-h: 13rem; }
}
.fmp .body .ph { margin: 1.6rem auto 1.8rem; text-align: center; }
.fmp .body .ph img { display: block; margin: 0 auto; width: min(100%, calc(var(--ph-h) * var(--ar, 1.5))); height: auto; border-radius: 3px; box-shadow: 0 1px 0 var(--rule); background: var(--paper-2); }
.fmp .body .ph.small img { width: min(100%, calc(var(--ph-h) * var(--ar, 1.5)), 640px); }
.fmp .body .ph.logo img { width: 200px; box-shadow: none; }
.fmp .body .ph figcaption { max-width: var(--measure); margin: .5rem auto 0; padding: 0 4px; }
.fmp .body .ph.pair { display: grid; gap: .6rem; align-items: start; width: min(100%, calc(var(--ph-h) * var(--ar) + (var(--n) - 1) * .6rem)); }
.fmp .body .ph.pair figure { margin: 0; }
.fmp .body .ph.pair img { width: 100%; }
.fmp .body .ph.pair figcaption { font-size: .85rem; }
.fmp .end { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: space-between; font: 500 .95rem/1.4 var(--sans); }
.fmp .end a { text-decoration: none; }
.fmp .end a:hover { text-decoration: underline; }
/* Human / Machine */
.mode { display: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: 999px; }
.js .mode { display: inline-flex; }
.mode .tool { border: 0; padding: .4rem .7rem; }
.mode .tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.machine { max-width: 46rem; margin: 0 auto; padding: 2rem 16px 5rem; font-family: var(--sans); }
.machine[hidden] { display: none; }
.machine .bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.machine .bar h1 { font: 500 1.2rem/1.3 var(--sans); margin: 0 auto 0 0; }
.machine .bar .note { flex-basis: 100%; margin: 0; font-size: .92rem; color: var(--ink-3); }
.machine pre { margin: 0; padding: 1rem 1.1rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .86rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); max-height: none; }
.machine a.tool { text-decoration: none; }
@media (max-width: 520px) { .js .mode { display: none; } }
@media print { .mode, .machine { display: none !important; } }
/* reading: no automatic hyphenation (the column is ragged-right anyway); headings and paragraphs break more evenly */
.post.fmp article[lang] .body, .post.fmp .glance { -webkit-hyphens: manual; hyphens: manual; }
.fmp h1, .fmp .body h2, .fmp .body h3 { text-wrap: balance; }
.fmp .body p, .fmp .body figcaption, .fmp .glance li { text-wrap: pretty; }
.fmp ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
/* every photo opens full screen */
.fmp .zoom { display: block; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
/* embeds: an X post and TikTok videos as previews; nothing loads from X or TikTok until play */
.fmp .body .xpost { max-width: 34rem; margin: 2.2rem auto 2.4rem; padding: 1rem 1.1rem .85rem; text-align: left; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); font: 400 1.02rem/1.5 var(--sans); color: var(--ink); box-shadow: 0 1px 2px var(--shadow); }
.fmp .xp-head { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem; }
.fmp .body .xp-av { flex: none; width: 44px; height: 44px; margin: 0; border-radius: 50%; box-shadow: none; }
.fmp .xp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fmp .body .xp-name { font-weight: 700; text-decoration: none; }
.fmp .xp-handle { font-size: .92rem; color: var(--ink-3); }
.fmp .xp-src { margin-left: auto; align-self: flex-start; font: 500 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .5rem; white-space: nowrap; }
.fmp .body .xp-text p { margin: 0 0 .55rem; overflow-wrap: break-word; text-wrap: pretty; }
.fmp .body .xp-text a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: .16em; }
.fmp .body .xp-text a:hover, .fmp .body .tt-cap a:hover { text-decoration-color: currentColor; }
.fmp .xp-media { position: relative; margin: .85rem 0 .7rem; overflow: hidden; border-radius: 12px; background: #000; border: 1px solid var(--rule); }
.fmp .xp-media video, .fmp .body .xp-media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; background: #000; border-radius: 0; box-shadow: none; }
.fmp .xp-play { display: none; }
.js .fmp .xp-play { display: grid; place-items: center; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fmp .xp-play svg { transition: transform .2s ease; }
.fmp .xp-play:hover svg { transform: scale(1.06); }
.fmp .xp-foot { font-size: .9rem; color: var(--ink-3); }
.fmp .body .xp-foot a { color: inherit; text-decoration: none; }
.fmp .body .xp-foot a:hover { color: var(--accent); text-decoration: underline; }
.fmp .tt-row { display: flex; justify-content: center; gap: 10px; margin: 1.6rem 0 1.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 4px; }
.fmp .tt-row::-webkit-scrollbar { display: none; }
.fmp .body .ttv { flex: 0 0 auto; width: 150px; margin: 0; scroll-snap-align: start; text-align: left; }
.fmp .ttv iframe, .fmp .tt-face { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 10px; background: #121110; }
.fmp .tt-face { position: relative; overflow: hidden; }
.fmp .tt-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmp .tt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.fmp .tt-play svg { width: 40px; height: 40px; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .fmp .tt-face:hover .tt-play svg { transform: scale(1.08); } }
.fmp .tt-wrap { position: relative; }
.fmp .tt-wrap .tt-row { justify-content: flex-start; margin-bottom: .6rem; }
.fmp .tt-nav { position: absolute; top: calc(1.6rem + 150px * 8 / 9 - 18px); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 400 1.6rem/1 var(--sans); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 2; }
.fmp .tt-nav.prev { left: -18px; }
.fmp .tt-nav.next { right: -18px; }
.fmp .tt-nav[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none), (max-width: 700px) { .fmp .tt-nav { display: none; } }
.fmp .body .tt-note { margin: 0 0 1.8rem; font: 400 .9rem/1.45 var(--sans); color: var(--ink-3); }
.fmp .body .tt-cap { margin: .4rem 2px 0; font: 400 .78rem/1.35 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fmp .body .tt-cap a { color: var(--ink-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-2) 35%, transparent); text-underline-offset: .16em; }
.fmp .tt-src { font-weight: 500; color: var(--ink); }
@media (max-width: 700px) { .fmp .tt-row:not(.one) { justify-content: flex-start; padding-left: 2px; } }
/* gallery: a grid of tiles (the first one big); each tile links to the large photo, the script opens it in a viewer */
.fmp .body .ph.gallery { text-align: left; }
.fmp .g-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.fmp .g-item { display: block; position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 3px; background: var(--paper-2); }
.fmp .g-lead { }
.fmp .body .g-item img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform .6s ease; }
.fmp .g-item:hover img { transform: scale(1.03); }
.fmp .g-item:focus-visible { outline-offset: 0; }
@media (max-width: 700px) {
  .fmp .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
}
.lightbox { padding: 0; border: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(14, 12, 9, .96); color: #f3ede3; overscroll-behavior: contain; }
.lightbox::backdrop { background: rgba(14, 12, 9, .96); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 8px 28px; box-sizing: border-box; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100% - 3.2rem); object-fit: contain; border-radius: 2px; user-select: none; -webkit-user-drag: none; }
.lightbox figcaption { font: italic 400 .95rem/1.4 var(--serif); color: #cfc6b8; margin: .7rem 12px 0; text-align: center; max-width: 40rem; min-height: 1.4em; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, .2); }
.lightbox .lb-close { top: 10px; right: 10px; }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }
.lightbox .lb-count { position: absolute; top: 22px; left: 18px; margin: 0; font: 500 .85rem/1 var(--sans); color: #bdb4a6; font-variant-numeric: tabular-nums; }
.lightbox.single .lb-prev, .lightbox.single .lb-next, .lightbox.single .lb-count { display: none; }
@media (hover: none), (pointer: coarse) {
  .lightbox figure { padding-bottom: 76px; }
  .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 16px; transform: none; }
  .lightbox .lb-prev { left: calc(50% - 56px); }
  .lightbox .lb-next { right: calc(50% - 56px); }
}
@media print { .lightbox { display: none !important; } }
/* Dust ("Thanos") effect, ported from the letter: lines gather out of dust as they come into view.
   It only applies while its script runs (html.fx-veil). Without JS, or with reduced motion, every word is simply there. */
.dust-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.dust-layer canvas { position: absolute; display: block; }
.fx-pending .fmp h1 { opacity: 0; }
.fx-veil .fmp .glance li:not(.shown),
.fx-veil .fmp .body > p:not(.shown):not(.cut),
.fx-veil .fmp .body > h2:not(.shown),
.fx-veil .fmp .body > h3:not(.shown),
.fx-veil .fmp .body figcaption:not(.shown),
.fx-veil .fmp .ck:not(.shown) { opacity: 0; }
/* photos and videos appear as the reader reaches them: a fade only, they never move */
.fx-veil .fmp .body .ph img, .fx-veil .fmp .body .tt-face, .fx-veil .fmp .body .xp-media { opacity: 0; transition: opacity .9s ease; }
.fx-veil .fmp .body .seen img, .fx-veil .fmp .body .tt-face.seen, .fx-veil .fmp .body .xp-media.seen, .fx-veil .fmp .body img.seen { opacity: 1; }
.fmp .soft { transition: opacity .45s ease; }
.fmp .ghost { opacity: var(--veil, 0) !important; }
.fx-veil .fmp h1.snap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media print {
  .dust-layer { display: none !important; }
  .fmp .body img, .fmp .body .tt-face, .fmp .body .xp-media { opacity: 1 !important; }
  .fmp h1, .fmp .glance li, .fmp .body > p, .fmp .body > h2, .fmp .body > h3, .fmp .body figcaption, .fmp .ck, .fmp .ghost { opacity: 1 !important; }
}

/* a reply under the X post */
.fmp .xp-replies { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); }
.fmp .body .xp-rh { margin: 0 0 .55rem; font: 500 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fmp .xp-reply { display: flex; gap: .6rem; align-items: flex-start; }
.fmp .body .xp-rav { width: 36px; height: 36px; }
.fmp .xp-rb { min-width: 0; flex: 1; }
.fmp .body .xp-rwho { margin: 0 0 .2rem; line-height: 1.3; }
.fmp .body .xp-rwho .xp-handle { margin-left: .35rem; }
.fmp .xp-role { display: block; font-size: .86rem; color: var(--ink-3); }
.fmp .body .xp-rtext { margin: 0 0 .35rem; }
.fmp .body .xp-foot { margin: 0; }
/* a pair with one caption under both pictures */
.fmp .body .pairwrap { width: min(100%, calc(var(--ph-h) * var(--ar) + (var(--n) - 1) * .6rem)); }
@media (min-width: 760px) { .fmp .body .pairwrap { --ph-h: 13rem; } .fmp .body .ph.pairwrap { clear: both; } }
.fmp .body .pairwrap .pair { display: grid; gap: .6rem; align-items: start; width: 100%; }
.fmp .body .pairwrap .pair figure { margin: 0; }
.fmp .body .pairwrap .pair img { width: 100%; }
.fmp .body .pairwrap figcaption { font-size: .85rem; }