/* Built for the feed: Instagram carousel showcase. Every slide is HTML/CSS at the 4:5 portrait ratio. */

.feed { padding: clamp(100px, 16vh, 180px) 0; border-top: 1px solid var(--line); overflow: hidden; --sw: clamp(250px, 24vw, 340px); }
.feed__head { display: grid; grid-template-columns: 7fr 5fr; gap: 28px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vh, 44px); }
.feed__side { display: grid; gap: 22px; }
.feed__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.feed__tab { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 15px; transition: background-color .3s, color .3s, border-color .3s; }
.feed__tab:hover { border-color: var(--ink); }
.feed__tab.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.feed__panel[hidden] { display: none; }
.feed__panel:not([hidden]) { animation: rise .6s var(--ease) both; }
.feed__post { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.feed__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.feed__bar b { font-size: 15px; }
.feed__bar .mono { margin-left: auto; color: var(--mute); font-size: 11px; }
.feed__av { width: 34px; height: 34px; border-radius: 50%; background: #0A090D; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--signal); color: #F2EEE6; }
.feed__avm { width: 20px; height: 20px; }
.feed__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; outline-offset: -3px; }
.feed__viewport::-webkit-scrollbar { display: none; }
.feed__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.feed__track { display: flex; gap: 6px; padding: 16px; width: max-content; }
.feed__track--pano { gap: 0; }
.feed__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 16px 14px; }
.feed__acts { display: flex; gap: 14px; font-size: 18px; }
.feed__save { justify-self: end; font-size: 20px; }
.feed__dots { display: flex; gap: 5px; }
.feed__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color .3s, transform .3s; }
.feed__dots i.is-on { background: var(--signal); transform: scale(1.25); }
.feed__why { color: var(--ink-2); margin-top: 16px; max-width: 70ch; }
.feed__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.feed__hint { color: var(--mute); font-size: 11px; margin-left: 8px; }

/* ---------- a slide ---------- */
.sl {
  --u: calc(var(--sw) / 100);
  position: relative; flex: none; width: var(--sw); aspect-ratio: 4 / 5; scroll-snap-align: center;
  padding: calc(var(--u) * 9); border-radius: 4px; overflow: hidden;
  background: linear-gradient(165deg, #17141d, #0d0c10); color: #F2EEE6;
  display: flex; flex-direction: column; justify-content: flex-start; gap: calc(var(--u) * 4);
  user-select: none;
}
.sl__n { position: absolute; top: calc(var(--u) * 5); right: calc(var(--u) * 5); font-size: calc(var(--u) * 3.4); color: rgba(242, 238, 230, .55); background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 999px; letter-spacing: .04em; }
.sl__mark { position: absolute; right: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: #F2EEE6; }
.sl__k { color: var(--signal); font-size: calc(var(--u) * 3.6); }
.sl__h { font-size: calc(var(--u) * 12.5); line-height: .95; letter-spacing: -.045em; font-weight: 650; margin: 0; font-variation-settings: "opsz" 96; }
.sl__h em { color: var(--signal); }
.sl__t { font-size: calc(var(--u) * 8.6); line-height: 1.02; letter-spacing: -.035em; font-weight: 620; margin: 0; }
.sl__p { font-size: calc(var(--u) * 4.4); color: #B9B3C2; line-height: 1.4; margin-top: auto; padding-right: calc(var(--u) * 14); }
.sl__big { font-size: calc(var(--u) * 34); line-height: .8; font-weight: 800; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 74, 28, .9); margin-bottom: calc(var(--u) * 2); }
.sl__swipe { margin-top: auto; color: #B9B3C2; font-size: calc(var(--u) * 3.6); }
.sl__cta { margin-top: auto; font-size: calc(var(--u) * 5.4); font-weight: 600; }
.sl--cover { background: radial-gradient(90% 70% at 85% 15%, rgba(123, 92, 255, .55), transparent 60%), radial-gradient(70% 60% at 10% 95%, rgba(255, 74, 28, .45), transparent 60%), #0D0B12; }
.sl--cover .sl__h { margin-top: auto; }
.sl--cta { background: var(--signal); color: var(--signal-ink); }
.sl--cta .sl__k { color: color-mix(in srgb, var(--signal-ink) 75%, transparent); }
.sl--cta .sl__h em { color: var(--signal-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sl--cta .sl__h { margin-top: auto; }
.sl--cta .sl__mark { color: var(--signal-ink); } .sl--cta .sl__mark path { stroke: var(--signal-ink); }

/* process visuals */
.sl__wire { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); }
.sl__wire i { height: calc(var(--u) * 11); border: 1.5px dashed rgba(92, 160, 255, .8); border-radius: 3px; }
.sl__wire i:first-child { grid-column: 1 / -1; }
.sl__sw { margin-top: auto; display: flex; gap: calc(var(--u) * 3); }
.sl__sw i { width: calc(var(--u) * 15); aspect-ratio: 1; border-radius: 50%; }
.sl__sw i:nth-child(1) { background: #FF4A1C; } .sl__sw i:nth-child(2) { background: #7B5CFF; } .sl__sw i:nth-child(3) { background: #F2EEE6; }
.sl__code { margin: auto 0 0; padding: calc(var(--u) * 4); border-radius: 4px; background: #0A1424; color: #7FD6FF; font: 500 calc(var(--u) * 3.6) / 1.6 var(--f-mono); white-space: pre-wrap; }
.sl__chart { margin-top: auto; width: 100%; height: auto; }

/* myth vs fact */
.sl__tag { align-self: flex-start; font-size: calc(var(--u) * 3.6); padding: 4px 10px; border-radius: 999px; background: rgba(61, 220, 151, .16); color: #3DDC97; }
.sl__tag--m { background: rgba(255, 90, 90, .16); color: #FF7A7A; }
.sl--myth { background: linear-gradient(165deg, #1f1216, #0d0c10); }
.sl--myth .sl__t, .sl--fact .sl__t { margin-top: auto; margin-bottom: auto; }
.sl--fact { background: linear-gradient(165deg, #0f1c17, #0d0c10); }
.sl__strike { text-decoration: line-through; text-decoration-color: #FF5A5A; text-decoration-thickness: 3px; color: rgba(242, 238, 230, .82); }

/* ---------- seamless panorama: one artwork, five slides ---------- */
.pano { --u: calc(var(--sw) / 100); position: relative; flex: none; width: calc(var(--sw) * 5); height: calc(var(--sw) * 1.25); border-radius: 4px; overflow: hidden; user-select: none; }
.pano__art { position: absolute; inset: 0; background: #0B0A10; color: #F2EEE6; }
.pano__glow { position: absolute; border-radius: 50%; filter: blur(calc(var(--u) * 6)); }
.pano__glow--a { width: calc(var(--sw) * 2.4); height: calc(var(--sw) * 1.6); left: calc(var(--sw) * 1.4); top: calc(var(--sw) * -0.3); background: radial-gradient(closest-side, rgba(123, 92, 255, .7), transparent); }
.pano__glow--b { width: calc(var(--sw) * 1.8); height: calc(var(--sw) * 1.4); left: calc(var(--sw) * 3.3); top: calc(var(--sw) * .35); background: radial-gradient(closest-side, rgba(255, 74, 28, .65), transparent); }
.pano__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(242, 238, 230, .5) 1.1px, transparent 1.4px); background-size: calc(var(--u) * 3) calc(var(--u) * 3); -webkit-mask: radial-gradient(50% 60% at 60% 55%, #000 15%, transparent 70%); mask: radial-gradient(50% 60% at 60% 55%, #000 15%, transparent 70%); }
.pano__k { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 12); color: var(--signal); font-size: calc(var(--u) * 3.8); }
.pano__kick { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 26); font-family: var(--f-serif); font-style: italic; font-size: calc(var(--u) * 17); line-height: .95; width: calc(var(--sw) * .9); }
.pano__word { position: absolute; left: calc(var(--sw) * .85); top: calc(var(--sw) * .3); font-size: calc(var(--sw) * 1.12); line-height: .8; font-weight: 800; letter-spacing: -.07em; font-variation-settings: "opsz" 96; white-space: nowrap; }
.pano__line { position: absolute; left: calc(var(--u) * 9); bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 3.6); color: #B9B3C2; letter-spacing: .12em; white-space: nowrap; }
.pano__cta { position: absolute; left: calc(var(--sw) * 4 + var(--u) * 9); top: calc(var(--u) * 14); width: calc(var(--sw) * .8); font-size: calc(var(--u) * 6); font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.pano__mark { position: absolute; right: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: #F2EEE6; }
.pano__seam { position: absolute; top: 0; bottom: 0; left: calc(var(--sw) * var(--i)); width: 0; border-left: 1px dashed rgba(242, 238, 230, .28); }
.pano__n { position: absolute; top: calc(var(--u) * 5); left: calc(var(--sw) * var(--i)); width: var(--sw); height: 1px; scroll-snap-align: start; display: flex; justify-content: flex-end; padding-right: calc(var(--u) * 5); font-size: calc(var(--u) * 3.4); color: rgba(242, 238, 230, .6); letter-spacing: .04em; overflow: visible; line-height: 0; }

html.xray .sl, html.xray .pano { outline: 1px dashed rgba(92, 200, 255, .6); }

@media (max-width: 1020px) { .feed__head { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .feed { --sw: 78vw; }
  .feed__track { padding: 12px; }
  .feed__bar .mono { display: none; }
}