/* Trellan v2 · the posts, drawn as each platform shows them (shared by proposals 1, 2 and 6).
   Every tile has the height --th; its width follows its platform's shape. Decision log T19–T20. */
/* tiles: all the same height (--th) */
.t{position:relative;height:var(--th);border-radius:11px;overflow:hidden;flex:none;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 36px -22px rgba(0,0,0,.9)}
.t img,.t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.t.v{width:calc(var(--th)*.5625)}.t.p{width:calc(var(--th)*.8)}
.t .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 55%,rgba(0,0,0,.75))}
.t .tag{position:absolute;left:7px;top:7px;width:16px;height:16px;color:#fff;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.t .tag svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9}.t .tag svg .f{fill:currentColor;stroke:none}.t .tag.br svg{fill:currentColor;stroke:none}
.t .cap{position:absolute;left:8px;right:8px;bottom:8px;font:500 9.5px/1.3 -apple-system,"Helvetica Neue",sans-serif;color:#fff;z-index:2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t .play{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2}
.t .play svg{width:10px;height:10px;fill:#fff}
.t .bars{position:absolute;left:7px;right:7px;top:6px;display:flex;gap:3px;z-index:2}.t .bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.4)}.t .bars i.on{background:#fff}
.t .dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:3px;z-index:2}.t .dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}.t .dots i:first-child{background:#fff}
/* LinkedIn post, as on the phone: header, the hook in two lines and "…more", the media, Like / Comment / Repost / Send */
.t.li6{width:calc(var(--th)*.82);background:#fff;color:#191919;display:flex;flex-direction:column;font-family:-apple-system,"Segoe UI","Helvetica Neue",sans-serif}
.li6 .hd{display:flex;align-items:center;gap:6px;padding:7px 8px 4px;font-size:9px;line-height:1.15}
.li6 .hd i{width:20px;height:20px;border-radius:50%;background:center/cover;flex:none}.li6 .hd i.sq{border-radius:3px}
.li6 .hd>div{min-width:0}.li6 .hd b,.li6 .hd small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.li6 .hd b{display:block;font-weight:600}.li6 .hd small{display:block;color:#666;font-size:7.5px}
.li6 .hd em{margin-left:auto;font-style:normal;color:#666;font-size:11px;letter-spacing:1px;white-space:nowrap;align-self:flex-start}
.li6 .hd b span{font-weight:400;color:#666}
.li6 .hk{padding:0 8px;margin-bottom:5px;font-size:8.8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.li6 .hk span{color:#666}
.li6 .md{position:relative;flex:1;min-height:0;background:#f3f2ef;overflow:hidden}
.t.li6.wide{width:calc(var(--th)*1.5)}
.li6 .md .pg{position:absolute;right:5px;top:5px;z-index:6;font:600 7.5px/1 -apple-system,sans-serif;color:#fff;background:rgba(0,0,0,.6);padding:3px 5px;border-radius:99px}
.li6 .ft{display:flex;justify-content:space-around;padding:4px 2px 5px;border-top:1px solid #e8e8e8;color:#666;font-size:7px}
.li6 .ft span{display:flex;flex-direction:column;align-items:center;gap:1px}.li6 .ft .ic{width:10px;height:10px}
/* LinkedIn document opened like a fan: pages 1–3, the last page is the next step */
/* LinkedIn document (carousel): the pages side by side at full height, drifting slowly (same pace as the rows), "1 / 9" and the arrow */
.li6 .car{position:absolute;inset:0;overflow:hidden;background:#f3f2ef}
.li6 .car .ct{display:flex;height:100%;width:max-content;animation:carDrift 60s linear infinite}.li6 .car.c4 .ct{animation-duration:80s}
.li6 .car .cp{height:100%;aspect-ratio:4/5;flex:none;padding-right:4px;box-sizing:border-box}
.li6 .car .cp img{position:static;width:100%;height:100%;object-fit:cover;display:block}
@keyframes carDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.li6 .car .cn{position:absolute;right:6px;top:6px;z-index:3;font:600 7.5px/1 -apple-system,sans-serif;color:#fff}
.li6 .car .cn i{font-style:normal;background:rgba(0,0,0,.65);padding:3px 6px;border-radius:99px;white-space:nowrap}
.li6 .car .nx{position:absolute;right:6px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;z-index:3;display:flex;align-items:center;justify-content:center}
.li6 .car .nx svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.4}
/* Facebook post */
.t.fb6{width:calc(var(--th)*.82);background:#fff;color:#050505;display:flex;flex-direction:column;font-family:-apple-system,"Segoe UI","Helvetica Neue",sans-serif}
.fb6 .hd{display:flex;align-items:center;gap:6px;padding:7px 8px 4px;font-size:9px;line-height:1.15}.fb6 .hd i{width:20px;height:20px;border-radius:50%;background:center/cover;flex:none}
.fb6 .hd b{display:block;font-weight:600}.fb6 .hd small{display:block;color:#65676b;font-size:7.5px}
.fb6 .hk{padding:0 8px;margin-bottom:5px;font-size:8.8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb6 .md{position:relative;flex:1;min-height:0;overflow:hidden;background:#f0f2f5}
.li6 .md .bl,.fb6 .md .bl{position:absolute;inset:-12px;background:center/cover;filter:blur(14px) brightness(.9);transform:scale(1.1)}
.fb6 .md img,.fb6 .md video,.li6 .md img.whole{object-fit:contain;z-index:1}
.fb6 .ft{display:flex;justify-content:space-around;padding:4px 2px 5px;border-top:1px solid #e4e6eb;color:#65676b;font-size:7.5px}.fb6 .ft span{display:flex;align-items:center;gap:3px}.fb6 .ft .ic{width:10px;height:10px}
/* X and Threads, as on a computer (dark mode) */
.t.xw,.t.thw{width:calc(var(--th)*1.75);padding:8px 11px 6px;display:flex;flex-direction:column;font:400 10px/1.34 -apple-system,"Segoe UI","Helvetica Neue",sans-serif}
.t.xw{background:#000;color:#e7e9ea;box-shadow:0 0 0 1px #2f3336}
.t.thw{background:#101010;color:#f3f5f7;box-shadow:0 0 0 1px #2d2d2d}
.t.xw p,.t.thw p{flex:1;min-height:0;white-space:pre-line;overflow:hidden;padding-left:26px;margin-top:-5px}
.t.xw .ft,.t.thw .ft{display:flex;justify-content:space-between;padding:4px 4px 0 26px;color:#71767b}
.t.thw .ft{justify-content:flex-start;gap:18px;color:#ccc}
.t.xw .ft .ic,.t.thw .ft .ic{width:11px;height:11px}
.t.thw.has-m p{flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t.thw .tm,.t.thw .pinch{position:relative;margin:5px 0 0 26px;flex:1;min-height:0}
.t.thw .tm img{position:static;width:auto;height:100%;border-radius:7px}
/* pinch: two photos side by side with square corners, as Threads shows them; pinched, they join into one picture */
.t.thw .pinch img{position:static;width:auto;height:100%;border-radius:0}
.t.thw .pinch{display:flex;gap:6px;animation:pinch 4.5s ease-in-out infinite}
@keyframes pinch{0%,25%{gap:6px}55%,80%{gap:0}100%{gap:6px}}
.t.thw .pinch .hint{position:absolute;left:calc(var(--th)*.45);top:50%;transform:translate(-50%,-50%);font:600 8px/1 "Hanken Grotesk";letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:4px 7px;border-radius:99px}
/* YouTube long video: thumbnail with title */
.t.w{width:calc(var(--th)*1.4);background:#0f0f0f;display:flex;flex-direction:column}
.t.w .th{position:relative;height:calc(var(--th)*.79 - 30px);flex:none;flex:1}
.t.w .pr{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.3)}.t.w .pr i{display:block;height:100%;width:35%;background:#f00}

/* ── columns (proposals 1 and 2): one platform per column; its logo and formats stay at the top, only the posts move up or down.
   Each tile takes the column's width (100cqw of the track) and keeps its platform's shape. ── */
.cols6{grid-template-rows:minmax(0,1fr)}
.pcol{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;height:100%}
.clab{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;min-height:22px;font-size:12px;color:var(--on-dark);line-height:1.2}
.clab .appic{width:20px;height:20px;border-radius:6px;flex:none}.clab .appic.ai-facebook{border-radius:50%}
.clab b{font-weight:600;white-space:nowrap}.clab span{flex-basis:100%;font-size:10.5px;color:var(--on-dark-2)}
.ctrk{flex:1;min-height:0;overflow:hidden;container-type:inline-size;-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent)}
.col6{display:flex;flex-direction:column;gap:14px;animation:colUp var(--t,60s) linear infinite}
.pcol:nth-child(even) .col6{animation-name:colDown}
@keyframes colUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes colDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.col6>.tl{display:flex;flex-direction:column;gap:14px}
.col6 .t.v{--th:calc(100cqw/.5625)}.col6 .t.p{--th:calc(100cqw/.8)}
.col6 .t.li6,.col6 .t.fb6{--th:calc(100cqw/.82)}.col6 .t.li6.wide{--th:calc(100cqw/1.5)}
.col6 .t.xw,.col6 .t.thw{--th:calc(100cqw/1.75);width:100cqw;height:auto}
.col6 .t.thw .tm,.col6 .t.thw .pinch{flex:none;height:62cqw}
.col6 .t.w{--th:calc(100cqw/1.4);height:auto}.col6 .t.w .th{flex:none;height:56.25cqw}

/* in a column the cards take their natural height, so pictures keep their own shape (fewer posts on screen, each at a proper size) */
.col6 .t.li6,.col6 .t.fb6{height:auto}
/* LinkedIn in a column: the picture or document page square (1:1, as LinkedIn shows 1080×1080), wide videos 16:9. Facebook: 4:5 */
.col6 .li6 .md{flex:none;aspect-ratio:1/1}.col6 .fb6 .md{flex:none;aspect-ratio:4/5}
.col6 .li6.wide .md{aspect-ratio:16/9}
.col6 .li6 .md img.whole,.col6 .fb6 .md img{object-fit:cover;object-position:50% 20%}
.col6 .li6 .md .bl,.col6 .fb6 .md .bl{display:none}
/* X and Threads in a column: no picture next to the text, the text uses the full width */
.col6 .t.xw p,.col6 .t.thw p{padding-left:0;margin-top:2px}
.col6 .t.xw .ft,.col6 .t.thw .ft{padding-left:0}
.col6 .t.thw .tm,.col6 .t.thw .pinch{margin-left:0}
/* tall phone screenshots: in a row, the top of the screen (where the point is) at a readable size; in a column, the whole screen */
.t.thw .tm.tall{width:62%}.t.thw .tm.tall img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;border-radius:7px;border:1px solid #333}
/* in a column: whole text, whole screenshot, the thread line without faces */
.col6 .t.thw.has-m p{display:block}
.col6 .t.thw .tm.tall{height:auto;width:auto}.col6 .t.thw .tm.tall img{width:74%;height:auto}
/* Threads post (thPart): the mark on the left (joined by the line in a thread), date, text, picture, actions; smaller text, as in the app */
.t.thw{padding:8px 10px 6px 8px;font-size:9px;line-height:1.36}
.t.thw .tp{display:flex;gap:7px;min-height:0}
.t.thw:not(.thr) .tp{flex:1}
.t.thw .rl{width:16px;flex:none;display:flex;flex-direction:column;align-items:center}
.t.thw .lg{width:16px;height:16px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;flex:none}
.t.thw .lg svg{width:9px;height:9px;fill:currentColor}
.t.thw .tp:not(.last) .rl::after{content:"";flex:1;width:1.5px;background:#3a3a3a;margin:4px 0 2px}
.t.thw .bd{flex:1;min-width:0;display:flex;flex-direction:column}
.t.thw .hd3{display:flex;align-items:center;font-size:8.5px;color:#777;height:16px}.t.thw .hd3 em{margin-left:auto;font-style:normal;letter-spacing:1px;color:#777}
.t.thw .tp p{padding:0;margin:0;white-space:pre-line;overflow:hidden}
.t.thw:not(.thr) .tp p{flex:1;min-height:0}
.t.thw.has-m:not(.thr) .tp p{flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t.thw .tp .ft{display:flex;gap:16px;padding:5px 0 6px;color:#ccc;margin-top:auto}.t.thw .tp .ft .ic{width:10px;height:10px}
.t.thw .tp .tm,.t.thw .tp .pinch{margin:5px 0 0;flex:1;min-height:0}
.t.thw.thr{width:calc(var(--th)*2);-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.t.thw.thr .tp,.t.thw.thr .tp p{flex:none}
.t.thw.thr .tp .tm,.t.thw.thr .tp .pinch{flex:none;height:calc(var(--th)*.5)}
/* in a column: everything at its natural height */
.col6 .t.thw.thr{width:100cqw;-webkit-mask-image:none;mask-image:none}
.col6 .t.thw .tp .tm,.col6 .t.thw .tp .pinch{flex:none;height:auto}
.col6 .t.thw .tp .tm:not(.tall) img{width:100%;height:auto}
.col6 .t.thw .tp .pinch img{width:50%;height:auto;min-width:0}
.col6 .t.thw.has-m .tp p{display:block}
/* X post: black, its six actions spread across */
.t.thw.xw{background:#000;color:#e7e9ea;box-shadow:0 0 0 1px #2f3336}
.t.thw.xw .tp .ft{justify-content:space-between;gap:0;color:#71767b}
/* Instagram story with its sticker (poll, quiz, question), sized to the story */
.t.v.sty{container-type:inline-size}
.sty .stk{position:absolute;left:12cqw;right:12cqw;z-index:3;background:#fff;border-radius:3.5cqw;padding:3.2cqw 3cqw;box-shadow:0 1.5cqw 5cqw rgba(0,0,0,.35);display:flex;flex-direction:column;gap:1.8cqw;font-family:-apple-system,"Helvetica Neue",sans-serif;color:#111}
.sty .stk b{display:block;text-align:center;font-size:4.6cqw;font-weight:700;line-height:1.2}
.sty .stk i{display:flex;align-items:center;gap:2cqw;font-style:normal;font-size:4cqw;font-weight:600;background:#efefef;border-radius:2.5cqw;padding:2.4cqw 3cqw;line-height:1.2}
.sty .stk.quiz b{background:linear-gradient(90deg,#8a3ab9,#e95950,#fccc63);color:#fff;margin:-3.2cqw -3cqw .6cqw;padding:2.6cqw 3cqw;border-radius:3.5cqw 3.5cqw 0 0}
.sty .stk.quiz u{text-decoration:none;flex:none;width:5.6cqw;height:5.6cqw;border-radius:50%;border:.35cqw solid #bbb;display:flex;align-items:center;justify-content:center;font-size:3.2cqw;color:#666}
.sty .stk.ask i{color:#999;font-weight:400;justify-content:center}
.sty .stk.quiz{left:16cqw;right:16cqw;gap:1.2cqw;padding:2.2cqw 2.4cqw}
.sty .stk.quiz b{font-size:3.8cqw;margin:-2.2cqw -2.4cqw .4cqw;padding:1.8cqw 2.4cqw}
.sty .stk.quiz i{font-size:3.3cqw;padding:1.6cqw 2.4cqw}
.sty .stk.quiz u{width:4.4cqw;height:4.4cqw;font-size:2.6cqw}
/* London and the other quizzes: smaller, below the face */
.sty .stk.quiz{left:22cqw;right:22cqw}
.sty .stk.quiz b{font-size:3.2cqw}.sty .stk.quiz i{font-size:2.8cqw;padding:1.3cqw 2cqw}.sty .stk.quiz u{width:3.8cqw;height:3.8cqw;font-size:2.2cqw}
/* Instagram feed post (igPost) */
.t.ig6{width:calc((var(--th) - 50px)*.8);background:#fff;color:#111;display:flex;flex-direction:column;font-family:-apple-system,"Helvetica Neue",sans-serif}
.ig6 .hd{height:22px;flex:none;display:flex;align-items:center;gap:5px;padding:0 7px}
.ig6 .hd .appic{width:14px;height:14px;border-radius:4px}
.ig6 .hd em{margin-left:auto;color:#555;font-style:normal;letter-spacing:1px;font-size:10px}
.ig6 .md{position:relative;flex:none;aspect-ratio:4/5;overflow:hidden;background:#000}
.ig6 .md>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig6 .car{position:absolute;inset:0;overflow:hidden}
.ig6 .car .ct{display:flex;height:100%;width:max-content;animation:carDrift 60s linear infinite}
.ig6 .car .cp{height:100%;aspect-ratio:4/5;flex:none;padding-right:2px;box-sizing:border-box}
.ig6 .car .cp img{position:static;width:100%;height:100%;object-fit:cover;display:block}
.ig6 .cn{position:absolute;right:6px;top:6px;z-index:3;font:600 7.5px/1 -apple-system,sans-serif;color:#fff}.ig6 .cn i{font-style:normal;background:rgba(0,0,0,.6);padding:3px 6px;border-radius:99px}
.ig6 .ft{position:relative;flex:none;height:28px;display:flex;align-items:center;gap:9px;padding:0 8px;color:#111}
.ig6 .ft .ic{width:12px;height:12px}.ig6 .ft .sv{margin-left:auto;display:flex}
.ig6 .dt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:3px}.ig6 .dt i{width:4px;height:4px;border-radius:50%;background:#c8c8c8}.ig6 .dt i.on{background:#0095f6}
.col6 .t.ig6{width:100cqw;height:auto}

/* a set of stories in one frame: one shows at a time, a new one every second; the bar of the current one fills, the earlier ones stay full */
.sty.set .sf{position:absolute;inset:0;opacity:0}.sty.set .sf.on{opacity:1}
.sty.set .sf img{width:100%;height:100%;object-fit:cover}
.sty.set .bars{z-index:4}.sty.set .bars i{position:relative;overflow:hidden}
.sty.set .bars i.cur::after{content:"";position:absolute;inset:0;width:0;background:#fff;animation:stbar 1s linear forwards}
@keyframes stbar{to{width:100%}}

/* TikTok mark: small, high in the corner, on its black app square; YouTube Shorts: the red Shorts logo */
.t .tag.ttm{left:5px;top:5px;width:11px;height:11px;padding:2.5px;background:#000;border-radius:3.5px;filter:none;box-sizing:content-box}.t .tag.ttm svg{stroke:none;overflow:visible}
.t .tag.ysm{left:5px;top:5px;width:15px;height:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}.t .tag.ysm svg{stroke:none}
/* YouTube long video: only the player, its progress line and the YouTube mark */
.t.w .ytm{position:absolute;right:7px;bottom:7px;width:20px;height:14px;z-index:2}
.t.w .ytm::before{content:"";position:absolute;inset:3px 6px;background:#fff}
.t.w .ytm svg{position:relative;display:block;width:100%;height:100%;fill:#f00}
/* Threads and X: the text runs the full width of the post, starting under the logo, at the LinkedIn text size; pictures and actions stay where they are.
   In a multi-part thread the line joining the parts sits in the gap between them, so it never crosses the text. */
.t.thw .tp p{margin-left:-23px;font-size:8.8px;line-height:1.3}
.t.thw .tp{position:relative}
.t.thw .tp:not(.last) .rl::after{display:none}
.t.thw.thr .tp:not(.last){padding-bottom:7px}
.t.thw.thr .tp:not(.last)::after{content:"";position:absolute;left:7.25px;bottom:-3px;height:13px;width:1.5px;background:#3a3a3a}