/* Job-search homepage (index.html): the studio homepage's look (home.css + hero-chain.css) plus the /hire/ pieces
   (status pill dot, work cards, skills chips, contact links), copied from hire/hire.css and scoped to this page. */

/* hero: name big, role line under it, status pill with a green dot */
.ss-hero .v3-pill.jb-pill{display:inline-flex;align-items:center;gap:10px}
.jb-pill .dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.16),0 0 12px rgba(61,220,132,.7)}
.ss-hero .v3-h1.hx-h1.jb-h1{font-size:clamp(44px,6vw,92px);max-width:none;margin-bottom:18px}
.jb-role{display:block;margin:0 auto 22px;font-size:clamp(20px,2.3vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.2;color:var(--fg);text-wrap:balance}
.jb-role i{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em}
.jb-role .sep{opacity:.45;margin:0 .35em}
.ss-hero .v3-sub.hx-sub.jb-sub{margin-bottom:30px}
.jb-cta .v3-btn svg{width:16px;height:16px;flex:none;margin-right:8px}
@media(max-width:759px){
  .ss-hero .v3-h1.hx-h1.jb-h1{font-size:clamp(38px,11vw,52px)}
  .jb-role{font-size:clamp(17px,4.8vw,22px)}
  .ss-hero .v3-pill.jb-pill{font-size:12.5px;padding:8px 14px;gap:8px}
  html[lang=ru] .ss-hero .v3-pill.jb-pill{font-size:11.5px}
  .jb-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:358px;margin:0 auto}
  .jb-cta .v3-btn{width:100%;justify-content:center}
  .jb-cta .v3-btn-w{grid-column:1/-1}
}

/* selected work: hire/hire.css .hr-work */
.hr-work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;text-align:left}
.hr-work .wkp-card{padding:12px 12px 22px;border-radius:24px}
.hr-work .wkp-img{aspect-ratio:16/10;border-radius:14px}
.hr-work .wkp-meta{padding:22px 12px 0;align-items:center}
.hr-work .wkp-meta b{font-size:clamp(24px,2.2vw,30px)}
.hr-work .wkp-meta small{font-size:16px;line-height:1.45;margin-top:6px;max-width:34em}
.hr-work .wkp-meta small em{font-family:inherit;font-style:normal;color:var(--fg)}
.hr-work .wkp-card:hover{transform:translateY(-4px)}
.hr-work .wkp-card.hr-wide{grid-column:1/-1}
.hr-work .wkp-card.hr-wide .wkp-img{aspect-ratio:2.4/1}
.hr-work .wkp-card.hr-wide .wkp-img img{object-fit:cover;object-position:center 30%}
@media(max-width:760px){.hr-work{grid-template-columns:1fr;gap:14px}.hr-work .wkp-meta{flex-direction:column;align-items:flex-start;gap:16px}.hr-work .wkp-btn{display:none}.hr-work .wkp-card.hr-wide .wkp-img{aspect-ratio:16/10}}

/* how I work with AI agents: the studio "process" block (proof3d) with 4 cards; descriptions are a bit longer */
#process .hx-st-d{text-wrap:pretty}

/* skills: liquid-glass chips (hire .hr-skills) */
.hr-skills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto;padding:0}
.hr-skills li{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;white-space:nowrap;
  font-size:16px;line-height:1.2;color:var(--fg);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.015) 55%,rgba(255,255,255,.03)),rgba(12,14,20,.32);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 20px -14px rgba(120,170,255,.25),0 12px 30px -18px rgba(0,0,0,.9);
  transition:transform .4s var(--ease)}
.hr-skills li:hover{transform:translateY(-3px)}
.hr-skills li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 40%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hr-skills li i{width:6px;height:6px;border-radius:50%;background:#4d8dff;box-shadow:0 0 10px #4d8dff}
html.light .hr-skills li{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5)),rgba(255,255,255,.3);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(10,20,40,.07),0 12px 28px -18px rgba(20,40,90,.35)}
html.light .hr-skills li::before{display:none}
@media(max-width:640px){.hr-skills{gap:8px}.hr-skills li{padding:11px 16px;font-size:14.5px;white-space:normal}}

/* contact: the studio .contact block without the form */
.jb-contact .c-acts{gap:22px}
.jb-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.jb-links a{font-size:16px}
.jb-studio{margin:44px auto 0;font-size:14.5px;color:var(--muted)}
.jb-studio a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
html.light .jb-studio a{text-decoration-color:rgba(0,0,0,.3)}
.jb-studio a:hover{text-decoration-color:currentColor}

/* nav brand: keep the full name on phones too (the studio hides the <em> part) */
#nav .nlogo em{display:inline}