/* ---------- visual essays (see essays.js) ---------- */
.post--xp { position: relative; padding: 0 0 120px; }
.post--xp > .post__back { position: absolute; z-index: 6; top: calc(var(--tabs-h) + 14px); left: var(--pad); color: var(--xlink, #5d5a55); }
.post--xp .post__end { padding: 0 var(--pad); }
.xp { --xbg: #fbfbf9; --xink: #151515; --veil: 0; position: relative; background: var(--xbg); color: var(--xink); transition: background-color .8s ease, color .8s ease; }
.xp__stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; }
.xp__flow { position: relative; z-index: 1; }
.xp__text.post__body { position: relative; z-index: 1; width: min(540px, 40vw); max-width: none; margin: 0 var(--pad) 48vh auto; color: inherit; }
.xp__text::before { content: ""; position: absolute; inset: -30px -34px; z-index: -1; border-radius: 6px; background: var(--xbg); opacity: var(--veil); transition: opacity .6s ease, background-color .8s ease; }
.xp .post__body strong, .xp .post__body h3, .xp .post__body .mark { color: inherit; }
.xp .post__body > p:first-child::first-letter { float: none; font: inherit; margin: 0; padding: 0; background: none; color: inherit; }
.xp__moment { position: relative; }
.xp__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; align-content: center; gap: 22px; text-align: center; padding: calc(var(--tabs-h) + 24px) var(--pad) 48px; }
.xp__pin.is-top { align-content: start; padding-top: calc(var(--tabs-h) + 9vh); }
.xp__pin.is-low { align-content: end; padding-bottom: 10vh; }
.xp__pin.is-side { justify-items: end; }
.xp__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(42px, 6.4vw, 96px); line-height: 1; letter-spacing: -.01em; max-width: 12em; }
.xp__read, .xp__hint { margin: 0; font-family: var(--hand); font-size: 20px; opacity: .7; }
.xp__big { margin: 0; max-width: 17em; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 60px); line-height: 1.16; opacity: 0; }
.xp__big strong { font-weight: 400; }
@media (max-width: 899px) {
  .xp__text.post__body { width: auto; margin: 0 var(--pad) 55vh; }
  .xp__text::before { opacity: max(var(--veil), .9); inset: -22px -16px; }
  .xp__pin.is-side { justify-items: center; align-content: end; padding-bottom: 12vh; }
}

/* 1. The Cost of Always Moving */
.xp--move { --xbg: #15100c; --xink: #f1e6d6; --hl: rgba(246, 196, 90, .4); --xlink: rgba(241, 230, 214, .75); }
.mv__sky, .mv__shade, .mv__crowd, .mv__world { position: absolute; inset: 0; }
.mv__glow { position: absolute; width: 46vmin; height: 46vmin; right: 18%; top: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 170, .75), rgba(255, 190, 120, .18) 45%, rgba(255, 180, 110, 0) 70%); transition: opacity 1s ease; }
.mv__label { position: absolute; left: var(--pad); top: calc(var(--tabs-h) + 54px); margin: 0; font-family: var(--hand); font-size: clamp(40px, 6.5vw, 104px); line-height: 1; color: rgba(255, 248, 236, .32); transition: opacity .6s ease; }
.mv__world { will-change: transform; }
.mv__seg { position: absolute; top: 0; bottom: 0; }
.mv__city { position: absolute; left: 0; bottom: 16%; fill: rgba(12, 8, 10, .34); }
.mv__win { fill: rgba(255, 214, 150, .5); }
.mv__p { position: absolute; transform: translateX(-50%); }
.mv__fig { display: block; fill: rgba(14, 9, 7, .9); }
.mv__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; }
.mv__person { position: absolute; left: var(--px); bottom: 16%; transform: translateX(-50%) scale(var(--sc, 1)); transform-origin: 50% 100%; }
.mv__person .mv__fig { fill: #0b0706; }
.mv__close { position: absolute; left: var(--px); bottom: 16%; opacity: 0; }
.mv__near { position: absolute; bottom: 0; left: var(--dx); transform: translateX(-50%) scale(var(--sc, 1)); transform-origin: 50% 100%; }
.mv__near .mv__fig { fill: #120a07; }
.mv__lights { position: absolute; left: calc(var(--px) - 30vw); width: 26vw; bottom: 18%; height: 30px; display: flex; justify-content: space-between; align-items: flex-end; transition: opacity 1s ease; }
.mv__lights span { width: 10px; height: 13px; border-radius: 2px; background: rgba(255, 196, 120, .12); transition: background-color 1.4s ease, box-shadow 1.4s ease; }
.mv__lights span.is-on { background: #ffcf7a; box-shadow: 0 0 18px 6px rgba(255, 186, 96, .45); }
.mv__shade { background: linear-gradient(to left, rgba(10, 7, 5, .78), rgba(10, 7, 5, .35) 46%, rgba(10, 7, 5, 0) 66%); transition: opacity .8s ease; }
.mv__cap { position: relative; margin: 0; width: min(480px, 38vw); min-height: 4.4em; text-align: left; font-family: var(--display); font-size: clamp(26px, 2.8vw, 42px); line-height: 1.2; color: #fbf1e2; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.mv__cap span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.mv__cap span.is-on { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .mv__shade { background: linear-gradient(to top, rgba(10, 7, 5, .6), rgba(10, 7, 5, 0) 60%); }
  .mv__cap { width: 88vw; max-width: none; text-align: center; font-size: 26px; }
  .mv__cap span { left: 0; right: 0; }
  .mv__lights { left: 4vw; width: 18vw; }
}

/* no highlighter in this essay */
.xp--move .post__body strong, .xp--move .post__body .mark span { background-image: none; }

/* 2. The End of Boredom */
.xp--bore { --cx: 27vw; --cy: 50vh; }
.xp--bore .xp__stage { transition: none; }
.xp--bore.is-break, .xp--bore.is-break .xp__text::before { transition: none; }
.xp--bore.is-break .xb__layer { display: none; }
.xb__layer { position: absolute; inset: 0; pointer-events: none; }
.xb__clock { inset: auto; left: var(--cx); top: var(--cy); width: 74px; height: 74px; transform: translate(-50%, -50%); color: currentColor; transition: opacity .8s ease; }
.xb__clock svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .5; }
.xb__hand { transform-origin: 50px 50px; animation: tick 60s steps(60) infinite; }
.xb__dot { fill: currentColor; }
@keyframes tick { to { transform: rotate(360deg); } }
.xb__phone { inset: auto; left: var(--cx); top: var(--cy); width: min(230px, 54vw); aspect-ratio: 9 / 19; transform: translate(-50%, -50%); border-radius: 34px; overflow: hidden; background: #07060b; box-shadow: 0 0 0 3px #1d1b24, 0 0 90px rgba(123, 92, 255, .4), 0 0 170px rgba(255, 61, 127, .25); transition: opacity .6s ease, filter .8s ease; opacity: 0; }
.xb__phone.is-ghost { filter: grayscale(1) contrast(.6); box-shadow: 0 0 0 1px rgba(120,120,120,.4); }
.xb__feed { position: absolute; left: 10px; right: 10px; top: 10px; will-change: transform; }
.xb__ftile { height: 150px; margin-bottom: 10px; border-radius: 14px; position: relative; }
.xb__ftile::after, .xb__tile::after { content: ""; position: absolute; left: 10%; bottom: 10%; width: 46%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.75); box-shadow: 0 -12px 0 -1px rgba(255,255,255,.45); }
.xb__tile { position: absolute; left: 0; top: 0; border-radius: 12px; opacity: 0; scale: .92; transition: opacity .9s ease, scale .9s ease; box-shadow: 0 12px 30px rgba(0,0,0,.22); will-change: transform; }
.xb__tile.is-on { opacity: .95; scale: 1; }
.xb__pill { position: absolute; left: 0; top: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.94); color: #151515; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.18); opacity: 0; scale: .7; transition: opacity .35s ease, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.xb__pill.is-on { opacity: 1; scale: 1; }
.xb__badge { position: absolute; left: 0; top: 0; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #ff2d55; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; opacity: 0; scale: .4; transition: opacity .25s ease, scale .3s cubic-bezier(.3, 1.8, .5, 1); box-shadow: 0 4px 12px rgba(255,45,85,.45); }
.xb__badge.is-on { opacity: 1; scale: 1; }
.xb__name { position: absolute; top: calc(var(--tabs-h) + 56px); left: 0; right: 0; margin: 0; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); opacity: .55; }
.xb__nothing { margin: 0 0 18vh; font-family: var(--display); font-size: clamp(30px, 3.6vw, 52px); }
.xb__alts { display: grid; justify-items: center; gap: 14px; }
.xb__alt { position: relative; display: block; overflow: hidden; padding: 4px 14px; }
.xb__altw { display: block; font-family: var(--display); font-size: clamp(28px, 3.4vw, 50px); line-height: 1.15; opacity: 0; }
.xb__altt { position: absolute; inset: 0; border-radius: 10px; transform: translateX(115%); }
.xb__clockm { display: grid; justify-items: center; gap: 26px; }
.xb__cap { margin: 0; max-width: 20em; padding: 10px 20px; border-radius: 14px; background: rgba(8, 6, 14, .8); font-family: var(--display); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.2; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.xb__cap.is-in { animation: capin .6s ease; }
@keyframes capin { from { opacity: 0; transform: translateY(10px); } }
.xb__countbox { display: grid; justify-items: center; padding: 26px 46px 22px; border-radius: 26px; background: rgba(8, 6, 14, .96); color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.xb__count { font-family: var(--display); font-size: clamp(80px, 11vw, 160px); line-height: .9; font-variant-numeric: tabular-nums; }
.xb__unit { font-size: 18px; letter-spacing: .02em; opacity: .8; margin-top: 6px; }
.xb__wall { margin-top: 14px; font-family: var(--hand); font-size: 20px; color: #ffd84a; }
.xb__breakq { margin: 0; max-width: 16em; font-family: var(--display); font-size: clamp(30px, 3.8vw, 56px); line-height: 1.18; color: #151515; opacity: 0; }
.xb__q { margin: 0; font-family: var(--display); font-size: clamp(34px, 4.4vw, 64px); line-height: 1.1; opacity: 0; }
.xb__qs { margin: 22px 0 0; max-width: 24em; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.5vw, 22px); opacity: 0; }
.xp--bore[data-beat="quiet"] .xp__pin, .xp--bore[data-beat="nothing"] .xp__pin { gap: 30px; }

/* 3. What If Ishaan Wasn't Good at Painting? — a few quiet scenes, read in between */
.xp--ishaan { --xbg: #f5f3ef; --xink: #1d1b18; }
.xp--ishaan .xp__text.post__body { width: min(640px, 88vw); margin: 0 auto 34vh; }
.xp--ishaan .xp__text::before { display: none; }
.ih__sky, .ih__room, .ih__world, .ih__home, .ih__vig, .ih__grain { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.ih__room { background: linear-gradient(#ebe7e0 0 70%, #dfd8cd 70% 100%); }
.ih__room.is-warm { background: linear-gradient(#f2e3cd 0 72%, #e4cfb2 72% 100%); }
.ih__world { right: 50%; background: linear-gradient(#e3e8ed 0 70%, #d6dce3 70% 100%); }
.ih__home { left: 50%; background: linear-gradient(#f3e5d1 0 70%, #e8d6bd 70% 100%); }
.ih__sky { background: linear-gradient(#fbf9f5 0, #f6eee2 74%, #ebdec9 74%, #e4d4bb 100%); }
.ih__room.is-on, .ih__world.is-on, .ih__home.is-on, .ih__sky.is-on { opacity: 1; }
.ih__vig.is-on { opacity: 1; }
.ih__vig { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 52%, rgba(50, 36, 24, .14) 100%); }
.ih__grain { opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ih__floor { position: absolute; left: 0; right: 0; height: 1px; background: rgba(60, 46, 34, .16); opacity: 0; transition: opacity 1.4s ease; }
.ih__floor.is-on { opacity: 1; }
.ih__glow { position: absolute; top: 34%; width: 95vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 150, .5), rgba(255, 210, 150, 0)); opacity: 0; transition: opacity 1.6s ease, left 1.6s ease; pointer-events: none; }
.ih__obj, .ih__fig { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; pointer-events: none; }
.ih__obj { opacity: 0; filter: drop-shadow(0 8px 10px rgba(40, 30, 20, .16)); }
.ih__obj svg, .ih__fig svg { display: block; width: 100%; height: auto; }
.ih__fig { opacity: 0; transition: opacity 1.4s ease; filter: drop-shadow(0 8px 14px rgba(30, 20, 10, .14)); }
.ih__fig.is-on { opacity: 1; }
.ih__kid { width: 110px; } .ih__parent { width: 152px; } .ih__stand { width: 76px; }
.xp--ishaan .xp__pin strong { font-weight: inherit; }
.ih__step { position: absolute; left: 0; top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#d3c9bb, #c4b8a8); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 10px 18px rgba(50, 36, 24, .12); opacity: 0; transition: opacity 1.4s ease; }
.ih__step.is-warm { background: linear-gradient(#d9c2a0, #c9ae88); }
.ih__step.is-on { opacity: 1; }
.ih__body { fill: #2b2622; }
.ih__parent .ih__body { fill: #3a322b; }
.ih__fig::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -7px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 30, 20, .2), rgba(40, 30, 20, 0)); }
.ih__wl { position: absolute; left: var(--pad); right: 3vw; top: calc(var(--tabs-h) + 8vh); display: grid; gap: .06em; }
.ih__tag { display: block; margin-bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; color: #6f7883; }
.ih__home .ih__tag { position: absolute; left: 4vw; top: calc(var(--tabs-h) + 8vh); color: #9a7a55; }
.ih__w { font-weight: 700; font-stretch: 75%; font-size: clamp(28px, 4.2vw, 68px); line-height: .92; letter-spacing: .02em; color: #9aa3ad; opacity: 0; }
.ih__q { margin: 0; max-width: 18em; font-family: var(--display); font-size: clamp(28px, 3.4vw, 50px); line-height: 1.15; opacity: 0; }
.xp__pin.ih__lovedpin { padding-top: calc(var(--tabs-h) + 15vh); }
.ih__loved { margin: 0; font-family: var(--display); font-size: clamp(40px, 5.6vw, 86px); line-height: 1.06; opacity: 0; }
.xp__pin.ih__worldpin { display: block; padding: 0; }
.ih__wcaps, .ih__hcaps { position: absolute; bottom: 8vh; width: 50%; height: 6em; }
.ih__wcaps { left: 0; } .ih__hcaps { right: 0; }
.ih__cap { position: absolute; left: 4vw; right: 4vw; bottom: 0; margin: 0; text-align: left; font-family: var(--display); font-size: clamp(19px, 1.8vw, 28px); line-height: 1.25; opacity: 0; }
.ih__wcaps .ih__cap { color: #4a5360; left: var(--pad); }
.ih__confess { display: grid; gap: 4px; }
.ih__confess p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.7vw, 26px); opacity: 0; }
.ih__togpin { position: sticky; }
.ih__still { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--tabs-h) + 14vh); margin: 0; font-family: var(--display); font-size: clamp(30px, 3.6vw, 54px); line-height: 1.15; opacity: 0; }
.xp__pin.ih__endpin { padding-top: calc(var(--tabs-h) + 11vh); gap: 4px; }
.ih__end1 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4.2vw, 64px); line-height: 1.1; opacity: 0; }
.ih__end2 { margin: 30px 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; opacity: 0; }
@media (max-width: 899px) {
  .ih__wcaps, .ih__hcaps { width: 100%; left: 0; right: 0; bottom: 6vh; }
  .ih__cap, .ih__wcaps .ih__cap { left: var(--pad); right: var(--pad); text-align: center; }
  .ih__wl { right: 52%; }
  .ih__w { font-size: 6.2vw; }
}

@media (prefers-reduced-motion: reduce) {
  .xb__hand { animation: none; }
}