/* The recruiting page uses the site's existing palette, type, and motifs. */
.recruit-main { flex: 1; }
.recruit-wrap { width: calc(100% - 2 * var(--header-inset)); max-width: 1200px; margin-inline: auto; }
.recruit-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; padding-block: 72px 104px; }
.recruit-hero .page-label { margin-bottom: 34px; }
.recruit-hero .page-label span { margin-left: 14px; color: var(--blue); letter-spacing: .12em; font-size: 10px; }
.recruit-hero h1 { font-size: clamp(32px, 4.25vw, 64px); line-height: 1.65; letter-spacing: -.05em; }
.recruit-lead { margin: 30px 0 34px; font-size: 17px; line-height: 2.1; }
.recruit-caption { margin: 17px 0 0; font-size: 11px; }
/* The box and pieces stay inside their own stage, away from the copy. */
.recruit-toybox { width: 100%; max-width: 440px; justify-self: end; }
.recruit-art { position: relative; width: 100%; aspect-ratio: 1; }
.toy-piece { position: absolute; z-index: 2; transition: transform 850ms cubic-bezier(.22,.8,.3,1); }
.toy-piece img { display: block; width: 100%; height: auto; }
.recruit-shape-blue { width: 42%; top: 6%; left: 8%; transform: rotate(90deg); }
.recruit-shape-ochre { width: 22%; top: 0; right: 7%; transform: rotate(180deg); }
.recruit-shape-orange { width: 34%; top: 34%; right: 6%; transform: rotate(-12deg); }
.recruit-shape-mist { width: 19%; top: 49%; left: 8%; }
.recruit-shape-small { width: 18%; top: 35%; left: 37%; transform: rotate(-35deg); }
.toy-box { position: absolute; z-index: 3; width: 68%; height: 25%; left: 18%; bottom: 3%; background: var(--blue); border-radius: 3px 3px 28px 28px; transform: rotate(-6deg); }
.toy-box::after { content: ''; position: absolute; width: 32%; height: 6%; left: 34%; top: 24%; border-radius: 8px; background: var(--background); }
.toy-box-lid { position: absolute; width: 68%; height: 5%; left: 12%; bottom: 35%; border: 2px solid var(--blue); transform: rotate(-17deg); }
.recruit-art[data-arrangement="1"] .recruit-shape-blue { transform: translate(68%, 20%) rotate(180deg); }
.recruit-art[data-arrangement="1"] .recruit-shape-ochre { transform: translate(-235%, 60%) rotate(270deg); }
.recruit-art[data-arrangement="1"] .recruit-shape-orange { transform: translate(-115%, -65%) rotate(35deg); }
.recruit-art[data-arrangement="1"] .recruit-shape-mist { transform: translate(240%, -15%); }
.recruit-art[data-arrangement="1"] .recruit-shape-small { transform: translate(-115%, 110%) rotate(90deg); }
.recruit-art[data-arrangement="2"] .recruit-shape-blue { transform: translate(10%, 56%) rotate(20deg); }
.recruit-art[data-arrangement="2"] .recruit-shape-ochre { transform: translate(-105%, 25%) rotate(90deg); }
.recruit-art[data-arrangement="2"] .recruit-shape-orange { transform: translate(0, -75%) rotate(-90deg); }
.recruit-art[data-arrangement="2"] .recruit-shape-mist { transform: translate(65%, -225%); }
.recruit-art[data-arrangement="2"] .recruit-shape-small { transform: translate(150%, 90%) rotate(180deg); }
.toybox-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 24px 0 0 auto; padding: 8px 0; min-height: 44px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 12px; }
.toybox-button:hover { color: var(--blue); }
.toybox-button span { font-size: 22px; }
.toybox-status { margin: 12px 0 0; text-align: right; font-size: 11px; min-height: 2em; }
.recruit-section { border-top: 1px solid var(--border); padding-block: 58px 82px; }
.recruit-main h2 { margin: 0; font-size: clamp(27px, 3vw, 42px); font-weight: 400; line-height: 1.8; letter-spacing: -.035em; }
.recruit-main .section-label { margin-bottom: 24px; }
.recruit-thought, .recruit-section-head, .recruit-working-inner, .recruit-talk { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; }
.recruit-copy { font-size: 15px; line-height: 2.2; }
.recruit-copy p { margin: 0 0 24px; text-wrap: pretty; }
.recruit-copy p:last-child { margin-bottom: 0; }
.recruit-copy .text-link { gap: 20px; }
.recruit-section-head { align-items: end; margin-bottom: 45px; }
.recruit-section-head > p { margin: 0 0 8px; font-size: 14px; line-height: 2; }
.recruit-work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-bottom: 28px; }
.recruit-work { border-top: 1px solid var(--border); padding-top: 20px; }
.recruit-number { font-size: 12px; color: var(--blue); }
.recruit-work h3 { margin: 24px 0 18px; font-size: 23px; font-weight: 400; }
.recruit-work p { margin: 0; font-size: 14px; line-height: 2; }
.recruit-work .recruit-work-note { margin-top: 25px; font-size: 11px; color: var(--blue); }
.recruit-working { background: var(--blue); color: var(--input-background); padding-block: 65px 70px; }
.recruit-working-inner > div > img { display: block; width: 100px; height: auto; margin: 40px 0 0 35%; transform: rotate(90deg); }
.recruit-facts { margin: 32px 0 0; font-size: 13px; }
.recruit-facts > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding-block: 15px; border-top: 1px solid #FAF6EE55; }
.recruit-facts dt, .recruit-facts dd { margin: 0; }
.recruit-talk { padding-block: 88px 96px; }
.recruit-talk h2 { color: var(--orange); }
.recruit-talk-copy > p:not(.section-label) { font-size: 15px; line-height: 2.1; margin: 27px 0 0; }
.recruit-talk-copy > .recruit-talk-note { font-size: 12px !important; }
.recruit-talk .contact-form { margin: 5px 0 0; }
.recruit-talk .button-primary { gap: 30px; }
.recruit-talk .button-primary span { font-size: 20px; }
.recruit-form-note { margin: 17px 0 0; font-size: 11px; }
.recruit-page .site-footer { padding-inline: var(--header-inset); }
@media (max-width: 950px) {
    .recruit-thought, .recruit-section-head, .recruit-working-inner, .recruit-talk { gap: 40px; }
    .recruit-work-list { gap: 24px; }
    .recruit-work h3 { font-size: 20px; }
}
@media (max-width: 700px) {
    .recruit-hero { grid-template-columns: 1fr; gap: 24px; padding-block: 40px 48px; }
    .recruit-hero .page-label { margin-bottom: 24px; }
    .recruit-hero h1 { font-size: clamp(27px, 7.3vw, 46px); }
    .recruit-lead { font-size: 15px; margin-block: 24px 26px; }
    .recruit-toybox { width: 75%; max-width: 290px; margin-right: 4%; }
    .recruit-art-note { font-size: 10px; }
    .recruit-section { padding-block: 34px 48px; }
    .recruit-thought, .recruit-section-head, .recruit-working-inner, .recruit-talk { grid-template-columns: 1fr; gap: 26px; }
    .recruit-main h2 { font-size: 28px; }
    .recruit-copy { font-size: 14px; }
    .recruit-section-head { margin-bottom: 30px; }
    .recruit-section-head > p { font-size: 13px; }
    .recruit-work-list { grid-template-columns: 1fr; gap: 28px; }
    .recruit-work { position: relative; padding-left: 38px; }
    .recruit-number { position: absolute; left: 0; top: 24px; }
    .recruit-work h3 { margin: 0 0 14px; font-size: 22px; }
    .recruit-work .recruit-work-note { margin-top: 16px; }
    .recruit-working { padding-block: 42px 40px; }
    .recruit-working-inner > div > img { display: none; }
    .recruit-facts > div { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
    .recruit-talk { padding-block: 52px 65px; gap: 34px; }
    .recruit-talk .form-row { grid-template-columns: 1fr; gap: 0; }
    .recruit-talk-copy > p:not(.section-label) { font-size: 14px; }
    .recruit-talk .button-primary { width: 100%; }
}

.recruit-curiosities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
.recruit-curiosities li { padding-top: 18px; border-top: 1px solid var(--border); font-size: 19px; line-height: 1.9; }
.recruit-curiosities span { display: block; color: var(--orange); margin-bottom: 18px; font-size: 11px; }
.recruit-expectation { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--border); }
.recruit-expectation h3 { margin: 0; font-size: 21px; line-height: 1.9; font-weight: 400; }
.recruit-openings { border-top: 0; padding-top: 80px; padding-bottom: 0; }
@media (max-width: 950px) { .recruit-expectation { gap: 40px; } .recruit-curiosities { gap: 28px; } .recruit-curiosities li { font-size: 17px; } }
@media (max-width: 700px) { .recruit-expectation { grid-template-columns: 1fr; gap: 24px; } .recruit-curiosities { grid-template-columns: 1fr; gap: 24px; } .recruit-curiosities li { display: flex; align-items: baseline; gap: 22px; font-size: 18px; } .recruit-curiosities span { margin: 0; } .recruit-expectation { margin-top: 40px; } .recruit-openings { padding-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .toy-piece { transition: none; } }

/* Project briefs share the recruiting page's typography and generous margins. */
.recruit-opening-list { border-top: 1px solid var(--border); }
.recruit-opening { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.recruit-opening .opening-kicker { margin: 0 0 16px; font-size: 12px; color: var(--blue); }
.recruit-opening h4 { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; line-height: 1.8; }
.recruit-opening p { max-width: 700px; margin: 0; font-size: 14px; line-height: 2; }
.opening-arrow { font-size: 34px; color: var(--blue); }
.recruit-opening:hover h4 { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.recruit-opening-note { margin: 26px 0 0; font-size: 13px; line-height: 2; }
.recruit-talk #contact-links { min-height: 110px; }
.project-main { padding-block: 40px 72px; }
.project-breadcrumb { margin-bottom: 36px; }
.project-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 64px; align-items: center; padding-bottom: 64px; }
.project-hero h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.7; letter-spacing: -.04em; }
.project-lead { margin: 30px 0 22px; font-size: 16px; line-height: 2.1; }
.project-tags { font-size: 12px; margin: 0 0 28px; }
.project-motif { width: 100%; height: auto; transform: rotate(-12deg); }
.project-body { max-width: 850px; }
.project-section { padding-block: 46px; border-top: 1px solid var(--border); }
.project-section h2 { margin: 0 0 28px; font-size: 30px; line-height: 1.8; font-weight: 400; letter-spacing: -.025em; }
.project-section .section-label { margin-bottom: 18px; }
.project-prose, .project-invitation > p:not(.section-label) { font-size: 15px; line-height: 2.2; }
.project-prose p { margin: 0 0 22px; text-wrap: pretty; }
.project-prose p:last-child { margin-bottom: 0; }
.project-prose ul { padding-left: 1.3em; margin: 24px 0; }
.project-prose li { margin-bottom: 10px; padding-left: 5px; }
.project-conditions { margin: 0; font-size: 14px; line-height: 2.1; }
.project-conditions > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 28px; padding-block: 20px; border-bottom: 1px solid var(--border); }
.project-conditions dt { color: var(--blue); }
.project-conditions dt, .project-conditions dd { margin: 0; }
.project-invitation h2 { color: var(--orange); }
.project-invitation .button-primary { margin-top: 16px; gap: 30px; }
.project-invitation .project-apply-note { font-size: 12px !important; }
.project-back { margin-top: 16px; }
@media (max-width: 700px) {
    .recruit-opening { gap: 16px; grid-template-columns: minmax(0, 1fr) 28px; padding-block: 26px; }
    .recruit-opening .opening-kicker { font-size: 11px; }
    .recruit-opening h4 { font-size: 21px; }
    .recruit-opening p { font-size: 13px; }
    .opening-arrow { font-size: 28px; }
    .project-main { padding-block: 24px 50px; }
    .project-breadcrumb { margin-bottom: 26px; }
    .project-hero { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
    .project-hero h1 { font-size: clamp(26px, 7vw, 38px); }
    .project-lead { font-size: 14px; margin-top: 24px; }
    .project-tags { font-size: 11px; }
    .project-motif { width: 105px; justify-self: end; margin-right: 20px; }
    .project-section { padding-block: 32px; }
    .project-section h2 { font-size: 26px; }
    .project-prose, .project-invitation > p:not(.section-label) { font-size: 14px; }
    .project-conditions { font-size: 13px; }
    .project-conditions > div { grid-template-columns: 1fr; gap: 8px; padding-block: 18px; }
    .project-invitation .button-primary { width: 100%; }
}

.recruit-opening-intro { margin: 0 0 18px; }
.recruit-opening-nav { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 40px; }
.recruit-opening-group { margin-top: 48px; }
.recruit-group-head { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: baseline; margin-bottom: 24px; }
.recruit-group-head h3 { margin: 0; color: var(--blue); font-size: 26px; font-weight: 400; }
.recruit-group-head p { margin: 0; font-size: 14px; line-height: 2; }
.recruit-talk select { display: block; width: 100%; min-width: 0; min-height: 51px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 2px; background: var(--input-background); color: var(--text); font: inherit; font-size: 16px; }
.recruit-talk select:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 950px) { .recruit-group-head { gap: 40px; } }
@media (max-width: 700px) { .recruit-opening-nav { gap: 8px 24px; margin-bottom: 28px; } .recruit-opening-group { margin-top: 34px; } .recruit-group-head { grid-template-columns: 1fr; gap: 14px; } .recruit-group-head h3 { font-size: 24px; } .recruit-group-head p { font-size: 13px; } }

/* Each bounded card is one opening; the heading above it is a field of work. */
.recruit-opening-nav a { min-width: 190px; justify-content: space-between; gap: 30px; padding: 12px 18px; border: 1px solid var(--border); text-decoration: none; }
.recruit-opening-nav a:hover { background: var(--input-background); }
.recruit-opening-nav a > span { font-size: 11px; color: var(--blue); }
.recruit-group-head { align-items: center; }
.recruit-group-head h3 { color: var(--text); white-space: nowrap; }
.recruit-group-head h3 small { display: block; margin-bottom: 10px; color: var(--blue); font-size: 12px; }
.group-count { display: inline-block; margin-left: 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 20px; font-size: 12px; vertical-align: middle; }
.recruit-opening-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border: 0; }
#design-openings .recruit-opening-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recruit-opening { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 28px; border: 1px solid var(--border); background: var(--input-background); }
.recruit-opening h4 { font-size: 23px; line-height: 1.7; }
.recruit-opening .opening-kicker { font-size: 11px; }
.opening-detail { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--blue); }
.opening-detail .opening-arrow { font-size: 24px; }
.recruit-opening:hover { border-color: var(--blue); }
@media (max-width: 950px) { #design-openings .recruit-opening-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .recruit-opening { padding: 24px; } .recruit-opening h4 { font-size: 21px; } }
@media (max-width: 700px) { .recruit-opening-list, #design-openings .recruit-opening-list { grid-template-columns: 1fr; gap: 16px; } .recruit-opening-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .recruit-opening-nav a { min-width: 0; gap: 12px; padding-inline: 12px; font-size: 12px; } .recruit-group-head h3 { font-size: 25px; } .recruit-opening { padding: 24px; gap: 24px; } }
.project-subheading { margin: 28px 0 12px; font-size: 17px; font-weight: 500; }
.project-status { color: var(--blue); border: 1px solid var(--border); padding: 12px 16px; font-size: 14px; }
.recruit-opening .opening-hours { margin-top: 18px; font-size: 11px; color: var(--blue); }