/* =========================================================
   COMPONENTS — small building blocks reused across sections
   ========================================================= */

/* ---------- type atoms ---------- */
.yk-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);}
.yk-label{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);}

/* ---------- buttons ---------- */
.yk-btn{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;padding:17px 26px;font-weight:500;border:none;background:none;color:var(--white);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .25s,color .25s,transform .25s;}
.yk-btn-primary{background:var(--orange);color:#0A0A0A;}
.yk-btn-primary:hover{background:var(--yolk);transform:translateY(-2px);}
.yk-btn-ghost{background:var(--line2);isolation:isolate;}
.yk-btn-ghost::before{content:'';position:absolute;inset:1px;background:var(--bg);clip-path:inherit;z-index:-1;}
.yk-btn-ghost:hover{background:var(--orange);color:var(--orange);}
.yk-btn[disabled]{opacity:.6;pointer-events:none;}

/* ---------- pills / tag lists ---------- */
.yk-pill{font-family:var(--mono);font-size:11.5px;color:var(--grey2);border:1px solid var(--line2);padding:6px 12px;border-radius:30px;white-space:nowrap;}
.yk-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}

/* ---------- cut-corner frame: outer = 1px border colour, inner (.yk-in) = surface ---------- */
.yk-cut{position:relative;display:block;padding:1px;background:var(--line2);transition:background .35s,transform .35s;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));}
.yk-cut:hover{background:var(--orange);}
.yk-cut > .yk-in{position:relative;height:100%;overflow:hidden;
  background:radial-gradient(480px circle at var(--mx,30%) var(--my,0%),rgba(255,153,32,0.14),transparent 60%),radial-gradient(600px circle at calc(100% - var(--mx,30%)) calc(100% - var(--my,0%)),rgba(86,3,173,0.12),transparent 65%),var(--card);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));}
.yk-tilt{transition:background .35s,transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform;}

/* ---------- morphing yolk blob ---------- */
.yk-blob{background:radial-gradient(circle at 34% 30%,var(--cream) 0,var(--yolk) 16%,var(--orange) 46%,var(--deep) 78%,#3a0a5e 100%);
  border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:ykMorph 9s ease-in-out infinite;box-shadow:0 0 60px rgba(255,153,32,0.35);}

/* ---------- section heading (partials/section-head.php) ---------- */
.yk-section{position:relative;padding:var(--section) 0;}
/* every section is sized to fit one screen under the floating header (~120px); sizes below lean on vh for that */
.yk-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,340px);gap:16px 40px;align-items:end;margin-bottom:clamp(28px,5.2vh,68px);}
.yk-idx{font-family:var(--display);font-weight:300;font-size:clamp(48px,min(7vw,11vh),104px);line-height:0.8;letter-spacing:-0.06em;color:transparent;-webkit-text-stroke:1px rgba(255,153,32,0.45);transition:color .6s,-webkit-text-stroke-color .6s;}
/* the number fills in while its section crosses the middle of the screen (assets/js/ui/reveal.js) */
.yk-idx.yk-on{color:var(--orange);-webkit-text-stroke-color:var(--orange);}
/* number on its own line, in sections without the shared heading (screens) */
.yk-idx-solo{display:block;margin-bottom:clamp(14px,2.4vh,22px);}
.yk-head h2{font-size:clamp(32px,min(4.8vw,7.4vh),68px);letter-spacing:-0.04em;margin-top:14px;line-height:0.98;}
.yk-head p{font-size:15px;line-height:1.65;}
@media(max-width:900px){.yk-head{grid-template-columns:1fr;}}

/* two-column text blocks (screens, interactive, contact) share this heading size */
.yk-screens h2,.yk-int h2,.yk-contact h2{font-size:clamp(32px,min(4.4vw,7vh),60px);letter-spacing:-0.04em;margin-top:14px;line-height:0.98;}

/* ---------- swelling letters (hero title; split by JS) ---------- */
.yk-w{display:inline-block;white-space:nowrap;}
.yk-c{display:inline-block;will-change:transform;}