/* Careers page */

/* ---------- header ---------- */
.jhead{position:relative;min-height:min(100vh,980px);min-height:min(100svh,980px);display:flex;align-items:center;padding:clamp(130px,16vh,170px) 0 clamp(150px,15vw,200px);background:var(--blue);color:var(--paper);overflow:hidden;isolation:isolate}
.jhead__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:clamp(32px,5vw,80px)}
.jhead__copy{pointer-events:none}
.jhead__copy a{pointer-events:auto}
.jhead__title{font-size:clamp(4.4rem,11.4vw,11.5rem);font-weight:800;letter-spacing:-.06em;line-height:.8;font-variation-settings:"opsz" 96}
.jhead__title .ooh{color:var(--yellow)}
.jhead__title em{font-style:normal;color:var(--yellow)}
.jhead__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px);opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .85s,transform 1s var(--ease) .85s}
.is-loaded .jhead__ctas{opacity:1;transform:none}
.jhead__art{position:relative;animation:bob 5s ease-in-out infinite alternate}
.jhead__case{display:block;width:100%;aspect-ratio:523/277;background:var(--yellow);-webkit-mask:url(icons/careers-case.png) center/contain no-repeat;mask:url(icons/careers-case.png) center/contain no-repeat;opacity:0;transform:scale(.6) rotate(-10deg);transition:opacity .8s .5s,transform 1.3s var(--spring) .5s}
.is-loaded .jhead__case{opacity:1;transform:none}
.jhead__doodle{position:absolute;left:0;bottom:clamp(24px,3.4vw,56px);z-index:1;width:100%;height:clamp(130px,17vw,250px);overflow:visible;pointer-events:none}
.jhead__doodle path{stroke:var(--yellow);stroke-width:3;opacity:.8;transition-duration:2.8s;transition-delay:.6s}
.jhead__badge{--delay:1.1s}
.jhead__roles{--delay:1.3s}
.jhead__hint{bottom:clamp(120px,12.5vw,160px)}

/* ---------- inside ---------- */
.inside{padding:calc(var(--section) + 20px) 0 var(--section)}
.inside__text{max-width:22em}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(56px,7vw,110px)}
.value{--v-bg:var(--blue);--v-fg:var(--paper);--v-mut:var(--on-dark);position:relative;display:flex;flex-direction:column;min-height:clamp(330px,30vw,420px);padding:clamp(22px,2.4vw,34px);border-radius:30px;background:var(--v-bg);color:var(--v-fg);overflow:hidden}
.value--yellow{--v-bg:var(--yellow);--v-fg:var(--ink);--v-mut:rgba(13,14,43,.72)}
.value--night{--v-bg:var(--night)}
.value__art{position:relative;display:flex;align-items:flex-end;height:clamp(110px,11vw,150px)}
.value h3,.value .value__h{margin-top:clamp(48px,6vw,92px);font-size:clamp(2rem,3.1vw,3.1rem);letter-spacing:-.04em}
.value p{margin-top:.7em;max-width:22em;color:var(--v-mut)}

/* a little crowd that takes turns hopping */
.value--blue .value__art i{width:clamp(54px,5.2vw,76px);aspect-ratio:1;margin-right:-14px;border-radius:50%;box-shadow:0 0 0 4px var(--blue);animation:hop 2.6s var(--ease-io) infinite}
.value--blue .value__art i:nth-child(1){background:var(--yellow)}
.value--blue .value__art i:nth-child(2){background:var(--paper);animation-delay:.16s}
.value--blue .value__art i:nth-child(3){background:var(--blue-2);box-shadow:0 0 0 4px var(--blue),inset 0 0 0 3px var(--paper);animation-delay:.32s}
.value--blue .value__art i:nth-child(4){background:var(--yellow-2);animation-delay:.48s}
@keyframes hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-22px)}}

.value__star{width:clamp(96px,9vw,128px);height:clamp(96px,9vw,128px);color:var(--blue);animation:spin 16s linear infinite}
.value__spark{position:absolute;color:var(--ink);animation:twinkle 3s ease-in-out infinite}
.value__spark--1{left:clamp(104px,10vw,150px);top:4px;width:26px;height:26px}
.value__spark--2{left:clamp(126px,12vw,176px);top:58%;width:16px;height:16px;animation-delay:-1.3s}
.value__eyes{font-size:clamp(5rem,7.6vw,7.2rem);line-height:.8}

/* ---------- teams ---------- */
.teams{padding:0 0 var(--section)}
.teams h2 em,.desk h2 em{color:var(--blue)}
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.team{display:flex;flex-direction:column;min-height:clamp(220px,20vw,270px);padding:clamp(18px,1.8vw,24px);border-radius:26px;background:var(--paper-2);transition:background-color .4s,color .4s}
.team:hover{background:var(--blue);color:var(--paper)}
.team__letter{display:block;margin-bottom:auto;padding-bottom:28px;font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,5.4vw,5.4rem);line-height:.8;letter-spacing:-.05em;color:var(--blue);transform-origin:20% 80%;transition:color .4s,transform .6s var(--spring)}
.team:hover .team__letter{color:var(--yellow);transform:rotate(-10deg) scale(1.08)}
.team h3{font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.05;letter-spacing:-.025em}
.team p{margin-top:.5em;font-size:.95rem;line-height:1.45;color:var(--muted);transition:color .4s}
.team:hover p{color:var(--on-dark)}
.team--you{padding:0;background:var(--yellow)}
.team--you a{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.8vw,24px);border-radius:inherit;color:inherit;text-decoration:none}
.team--you .team__letter{color:var(--ink)}
.team--you:hover{background:var(--ink)}
.team--you:hover .team__letter{transform:rotate(14deg) scale(1.1)}

/* ---------- on your desk ---------- */
.desk{padding:0 0 var(--section);overflow:hidden}
.desk .sec-head{margin-bottom:clamp(20px,2.6vw,36px)}
.desk__track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.desk__row{display:flex;width:max-content;padding:26px 0 34px}
.desk__track.is-ready .desk__row{animation:marquee 80s linear infinite}
.desk__track:hover .desk__row{animation-play-state:paused}
.desk__row li{flex:none;margin-right:clamp(14px,1.6vw,22px)}
.dcard{display:block;width:clamp(220px,24vw,340px);color:inherit;text-decoration:none;transform:rotate(var(--r));transition:transform .55s var(--spring)}
.dcard:hover,.dcard:focus-visible{transform:rotate(0deg) translateY(-8px) scale(1.03)}
.dcard__img{display:block;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--paper-2);box-shadow:0 26px 40px -28px rgba(5,6,40,.55)}
.dcard__img img{width:100%;height:100%;object-fit:cover}
.dcard__name{display:block;margin-top:12px;font-family:var(--display);font-weight:720;font-size:1.1rem;letter-spacing:-.02em}

/* ---------- open roles ---------- */
.roles{padding-inline:var(--inset)}
.roles__card{position:relative;overflow:hidden;padding:clamp(72px,9vw,130px) 0;border-radius:var(--r-lg);background:var(--night);color:var(--paper)}
.roles__star{position:absolute;left:-10%;bottom:-38%;width:clamp(280px,36vw,560px);height:clamp(280px,36vw,560px);color:var(--blue);opacity:.55;animation:spin 48s linear infinite}
.roles__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,6vw,100px);align-items:start}
.roles h2 em{color:var(--yellow)}
.roles__count{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,36px);padding:.65em 1.2em .65em 1.1em;border-radius:999px;background:rgba(245,242,234,.08);box-shadow:inset 0 0 0 1px rgba(245,242,234,.2);font-weight:600}

.role{border-radius:24px;background:rgba(245,242,234,.06);box-shadow:inset 0 0 0 1px rgba(245,242,234,.16);transition:background-color .3s;interpolate-size:allow-keywords}
.role+.role{margin-top:12px}
.role[open]{background:rgba(245,242,234,.1)}
.role summary{display:grid;grid-template-columns:1fr auto;grid-template-areas:"team more" "title more";align-items:center;gap:8px 20px;padding:clamp(20px,2.4vw,30px);list-style:none;cursor:pointer;border-radius:24px}
.role summary::-webkit-details-marker{display:none}
.role__team{grid-area:team;font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--yellow)}
.role__title{grid-area:title;font-family:var(--display);font-weight:760;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1;letter-spacing:-.04em}
.role__more{grid-area:more;display:inline-flex;align-items:center;gap:12px;font-size:.95rem;font-weight:600}
.role__label::after{content:"Read more"}
.role[open] .role__label::after{content:"Close"}
.role__plus{position:relative;width:48px;height:48px;border-radius:50%;background:var(--yellow);transition:transform .55s var(--spring)}
.role__plus::before,.role__plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease)}
.role__plus::after{transform:rotate(90deg)}
.role:not([open]) summary:hover .role__plus{transform:rotate(90deg)}
.role[open] .role__plus{transform:rotate(180deg)}
.role[open] .role__plus::after{transform:rotate(0deg)}
.role__body{padding:0 clamp(20px,2.4vw,30px) clamp(24px,2.8vw,34px)}
.role__lede{max-width:34em;font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--on-dark)}
.role__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin:clamp(26px,3vw,38px) 0}
.role h3{margin-bottom:12px;font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.11em;line-height:1.3;text-transform:uppercase;color:var(--yellow)}
.role li{position:relative;padding:.6em 0 .6em 1.5em;border-top:1px solid rgba(245,242,234,.16);line-height:1.45;color:var(--on-dark)}
.role li::before{content:"";position:absolute;left:0;top:.95em;width:.7em;height:.7em;background:var(--yellow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
.role::details-content{height:0;overflow:clip;transition:height .55s var(--ease),content-visibility .55s allow-discrete}
.role[open]::details-content{height:auto}
.role--empty{padding:clamp(24px,3vw,36px)}
.role--empty .role__lede{margin-top:.6em}

/* ---------- apply ---------- */
.apply{margin-top:calc(var(--section) * .6);padding:var(--section) 0;background:var(--yellow);color:var(--ink)}
.apply .kicker span{background:var(--blue)}
.apply__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:start}
.apply__bell{display:block;width:clamp(84px,8.4vw,120px);aspect-ratio:420/492;margin-bottom:clamp(22px,3vw,36px);background:var(--blue);-webkit-mask:url(icons/careers-bell.png) center/contain no-repeat;mask:url(icons/careers-bell.png) center/contain no-repeat;transform-origin:50% 10%;cursor:pointer}
.apply__bell.is-ringing{animation:ring 1.4s var(--ease)}
@keyframes ring{0%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}22%{transform:rotate(-13deg)}34%{transform:rotate(10deg)}46%{transform:rotate(-7deg)}58%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}}
.apply__title{font-size:clamp(2.6rem,5.4vw,5.4rem);font-weight:800;letter-spacing:-.05em;line-height:.92}
.apply__title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--blue)}
.apply__lede{max-width:26em;margin-top:clamp(18px,2.2vw,28px);font-size:clamp(1.05rem,1.3vw,1.2rem)}
.tips{margin-top:clamp(30px,3.6vw,48px);border-top:1.5px solid var(--ink);counter-reset:tip}
.tips li{position:relative;padding:16px 0 16px 2.4em;border-bottom:1px solid rgba(13,14,43,.2);counter-increment:tip}
.tips li::before{content:counter(tip);position:absolute;left:0;top:17px;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--ink);color:var(--yellow);font-size:.8rem;font-weight:700}
.tips b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roles__grid,.apply__grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .jhead{min-height:0;flex-direction:column;align-items:stretch;padding-top:128px}
  .jhead__grid{grid-template-columns:1fr}
  .jhead__title{font-size:min(19vw,7.4rem)}
  .jhead__art{width:min(78%,360px);margin-top:8px}
  .jhead__doodle{bottom:40px}
  .jhead__badge{left:auto;right:var(--gutter);top:118px;bottom:auto}
  .jhead__roles{left:auto;right:var(--gutter);top:auto;bottom:118px}
  .jhead__hint{position:relative;right:auto;bottom:auto;margin:22px var(--gutter) 0;align-self:flex-start}
  .values{grid-template-columns:1fr}
  .value{min-height:0}
  .role__cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .team{min-height:200px}
  .team p{font-size:.88rem}
  .role summary{grid-template-areas:"team more" "title title"}
  .role__label{display:none}
  .role__plus{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .jhead__case{opacity:1;transform:none;transition:none}
  .jhead__ctas{opacity:1;transform:none;transition:none}
  .desk__track{-webkit-mask-image:none;mask-image:none}
  .desk__row{flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--gutter);row-gap:20px}
  .role::details-content{transition:none}
}