/* buildercult.com · the links page. Speedrun grammar from /style.css: dark tonal layers, sun is the only action
   colour and wears the black outline, Anton for anything loud, Inter for everything read. */
.lk-head{max-width:var(--max);margin:0 auto;padding:56px 22px 34px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.lk-mark{--bc:clamp(20px,2.6vw,30px);--sr:clamp(64px,10vw,128px)}
.lk-sub{font-size:16px;color:var(--muted);max-width:44ch}

.lk-posts{max-width:var(--max);margin:0 auto;padding:0 22px;display:flex;flex-direction:column;gap:56px}
.lk-post{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px;align-items:start}
.lk-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;min-height:30px}
.lk-label h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.6vw,32px);line-height:1;letter-spacing:-.005em}

/* the post · Instagram's embed is white, so it sits on its own darker plate */
.lk-ig{position:sticky;top:22px}
.lk-ig .instagram-media{margin:0!important;min-width:0!important;width:100%!important;max-width:none!important;border-radius:var(--r)!important;border:0!important;box-shadow:none!important}
.lk-ig iframe.instagram-media{border-radius:var(--r)!important}
.ig-empty{aspect-ratio:4/5;background:var(--l1);border-radius:var(--r);display:grid;place-items:center;color:var(--dim)}

/* the links */
.lk-links{display:flex;flex-direction:column;gap:18px;min-width:0}
.lk-card{display:flex;flex-direction:column;gap:14px;background:var(--l1);border-radius:var(--r-lg);padding:12px 12px 16px;text-decoration:none;color:inherit;transition:background .15s,transform .15s}
a.lk-card:hover{background:var(--l2);transform:translateY(-2px)}
.win{background:var(--l2);border-radius:var(--r);overflow:hidden}
a.lk-card:hover .win{background:var(--l3)}
.bar{display:flex;align-items:center;gap:6px;padding:10px 14px}
.bar i{width:9px;height:9px;border-radius:50%;background:var(--l4)}
.bar span{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--l0);border-radius:var(--pill);padding:3px 12px}
.shot{aspect-ratio:16/10;overflow:hidden;background:var(--l0)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.lk-card:hover .shot img{transform:scale(1.03)}
.doc{height:min(560px,70vh);background:var(--l0)}
.doc iframe{display:block;width:100%;height:100%;border:0}

.meta{display:flex;align-items:center;gap:14px;padding:0 6px}
.meta .n{font-family:var(--disp);font-size:30px;line-height:1;color:var(--sun);flex:none;font-style:italic}
.meta .txt{flex:1;min-width:0}
.meta h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:-.005em;margin-bottom:6px}
.meta p{color:var(--muted);font-size:14px;line-height:1.45}
.meta .go{flex:none;white-space:nowrap}

.lk-foot{margin-top:40px}
.lk-more{display:flex;gap:18px;flex-wrap:wrap}
.lk-more a{color:var(--muted);text-decoration:none}
.lk-more a:hover{color:var(--ink)}

/* phones · people arrive from the post, so the links come first and the post sits under them */
@media (max-width:860px){
  .lk-head{padding:36px 16px 24px}
  .lk-posts{padding:0 16px}
  .lk-post{grid-template-columns:1fr}
  .lk-ig{position:static;order:2}
  .lk-links{order:1}
  .meta{flex-wrap:wrap}
  .meta .go{width:100%}
  .doc{height:460px}
}
@media (prefers-reduced-motion:reduce){.lk-card,.shot img{transition:none}}