/* recruit.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* recruit */
.recruit-page main {
  font-size: var(--font-16);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .01em;
}

.recruit-page main img {
  height: auto;
}

.recruit-page main h2 {
  font-size: clamp(var(--font-27),2.6vw,var(--font-37));
  line-height: 1.65;
  letter-spacing: .025em;
}

.recruit-page main h3 {
  font-size: var(--font-23);
  line-height: 1.6;
  letter-spacing: .015em;
}

.recruit-page main .kicker {
  font-size: var(--font-13);
  letter-spacing: .03em;
}

.recruit-page main figcaption {
  font-size: var(--font-13);
  color: var(--muted);
  margin-top: var(--space-10);
}

.rc-hero {
  position: relative;
  margin-top: var(--space-28);
  min-height: 570px;
}

.rc-hero figure {
  margin-left: 30%;
  width: 70%;
  height: 570px;
}

.rc-hero figure img {
  object-position: 68% center;
}

.rc-hero-copy {
  position: absolute;
  top: 35px;
  left: 0;
  width: 38%;
  padding: var(--space-26) var(--space-34) var(--space-28) 0;
  background: var(--ivory);
}

.rc-hero h1 {
  font-size: clamp(var(--font-37),3.7vw,var(--font-54));
  line-height: 1.55;
  margin: var(--space-19) 0 var(--space-28);
  letter-spacing: .025em;
}

.rc-hero-copy p:not(.kicker) {
  max-width: 31ch;
}

.rc-hero-copy p+p {
  margin-top: var(--space-18);
}

.rc-demo {
  font-size: var(--font-14);
  color: var(--muted);
  max-width: 86ch;
  margin: var(--space-22) 0 0;
}

.rc-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8%;
  align-items: center;
  padding: var(--space-85) 0;
}

.rc-intro figure img {
  aspect-ratio: 1.22;
  object-position: center;
}

.rc-intro h2 {
  margin: var(--space-16) 0 var(--space-26);
}

.rc-intro>div {
  max-width: 46ch;
}

.rc-work {
  padding: var(--space-15) 0 var(--space-85);
}

.rc-work-heading h2 {
  margin: var(--space-16) 0 var(--space-34);
}

.rc-work-making {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8%;
  align-items: center;
}

.rc-work-making figure img {
  aspect-ratio: 1.55;
}

.rc-work article h3 {
  margin-bottom: var(--space-15);
}

.rc-work article+article {
  margin-top: var(--space-35);
}

.rc-work-planning {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%;
  align-items: center;
  margin: var(--space-54) 0 0 8%;
}

.rc-work-planning figure img {
  aspect-ratio: 1.32;
}

.rc-stories {
  padding: var(--space-40) 0 var(--space-85);
  border-top: 1px solid var(--line);
}

.rc-stories h2 {
  margin: var(--space-16) 0 var(--space-35);
}

.rc-story-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 7%;
  align-items: end;
}

.rc-story-main figure img {
  aspect-ratio: 1.35;
}

.rc-story-main h3 {
  margin-bottom: var(--space-16);
}

.rc-story-main>div {
  padding-bottom: var(--space-30);
}

.rc-story-details {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8%;
  margin: var(--space-42) 8% 0;
  align-items: center;
}

.rc-story-details figure img {
  aspect-ratio: 1.05;
}

.rc-story-details article+article {
  margin-top: var(--space-32);
}

.rc-story-details h3 {
  margin-bottom: var(--space-13);
}

.rc-growth {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8%;
  align-items: center;
  padding: var(--space-15) 0 var(--space-85);
}

.rc-growth h2 {
  margin: var(--space-16) 0 var(--space-27);
}

.rc-growth figure img {
  aspect-ratio: 1.1;
  object-position: 50% center;
}

.rc-note {
  font-size: var(--font-14);
  color: var(--muted);
  line-height: 1.9;
  margin-top: var(--space-22);
}

.rc-information {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8%;
  padding: var(--space-48) 0 var(--space-65);
  border-top: 1px solid var(--line);
}

.rc-information h2 {
  margin-top: var(--space-15);
}

.rc-status {
  font-weight: 600;
  margin-top: var(--space-23);
}

.rc-next {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 7%;
  background: var(--color-ink);
  color: white;
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--space-55) var(--gutter);
  align-items: center;
}

.rc-next .kicker {
  color: var(--color-mist);
}

.rc-next h2 {
  margin: var(--space-16) 0 var(--space-25);
}

.rc-next p:not(.kicker) {
  max-width: 44ch;
}

.rc-next figure img {
  aspect-ratio: 1.25;
}

.rc-next-links {
  display: flex;
  gap: var(--space-18);
  flex-wrap: wrap;
  margin-top: var(--space-30);
}

.rc-next .solid-link {
  border: 1px solid var(--color-mist);
  min-width: 205px;
  font-size: var(--font-16);
  min-height: 62px;
}

.rc-next a:focus-visible {
  outline: 2px solid white;
  outline-offset: var(--space-5);
}

.recruit-page main a:focus-visible {
  outline-offset: var(--space-5);
}

/* recruit */
@media(max-width:1100px) {
.rc-hero {
  min-height: 600px;
}

.rc-hero figure {
  height: 600px;
}

.rc-hero-copy {
  width: 46%;
}

.rc-hero h1 {
  font-size: var(--font-38);
}

.rc-intro,
.rc-work-making,
.rc-growth {
  gap: 5%;
}

.rc-next-links {
  gap: var(--space-14);
}

.rc-next .solid-link {
  min-width: 190px;
}
}

/* recruit */
@media(max-width:700px) {
.recruit-page main h2 {
  font-size: var(--font-27);
}

.recruit-page main h3 {
  font-size: var(--font-22);
}

.rc-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: var(--space-23);
}

.rc-hero figure {
  width: 100%;
  height: auto;
  margin: 0;
}

.rc-hero figure img {
  aspect-ratio: 1.13;
  object-position: 76% center;
}

.rc-hero-copy {
  position: static;
  width: 100%;
  padding: var(--space-27) 0 0;
}

.rc-hero h1 {
  font-size: var(--font-33);
  margin: var(--space-17) 0 var(--space-25);
}

.rc-hero-copy p:not(.kicker) {
  max-width: none;
}

.rc-demo {
  margin-top: var(--space-22);
}

.rc-intro {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-28);
  padding: var(--space-48) 0 var(--space-50);
}

.rc-intro h2 {
  margin: var(--space-14) 0 var(--space-25);
}

.rc-intro figure {
  width: 100%;
}

.rc-intro figure img {
  aspect-ratio: 1.45;
}

.rc-intro>div {
  max-width: none;
}

.rc-work {
  padding: var(--space-8) 0 var(--space-50);
}

.rc-work-heading h2 {
  margin: var(--space-14) 0 var(--space-28);
}

.rc-work-making {
  display: block;
}

.rc-work-making figure {
  margin: 0 -3vw var(--space-27);
}

.rc-work-making figure img {
  aspect-ratio: 1.25;
  object-position: 45% center;
}

.rc-work-making figcaption {
  margin-left: 3vw;
}

.rc-work article+article {
  margin-top: var(--space-28);
}

.rc-work-planning {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-26);
  margin: var(--space-35) 0 0;
}

.rc-work-planning figure {
  width: 90%;
  align-self: flex-end;
}

.rc-work-planning figure img {
  aspect-ratio: 1.2;
  object-position: 65% center;
}

.rc-stories {
  padding: var(--space-38) 0 var(--space-48);
}

.rc-stories h2 {
  margin: var(--space-14) 0 var(--space-27);
}

.rc-story-main {
  display: block;
}

.rc-story-main figure img {
  aspect-ratio: 1.1;
  object-position: 40% center;
}

.rc-story-main>div {
  padding: var(--space-24) 0 0;
}

.rc-story-details {
  display: block;
  margin: var(--space-31) 0 0;
}

.rc-story-details figure {
  width: 85%;
  margin-bottom: var(--space-25);
}

.rc-story-details figure img {
  aspect-ratio: 1.2;
}

.rc-story-details article+article {
  margin-top: var(--space-28);
}

.rc-growth {
  display: block;
  padding: var(--space-10) 0 var(--space-48);
}

.rc-growth h2 {
  margin: var(--space-14) 0 var(--space-25);
}

.rc-growth figure {
  margin-top: var(--space-28);
}

.rc-growth figure img {
  aspect-ratio: 1.15;
  object-position: 52% center;
}

.rc-information {
  display: block;
  padding: var(--space-35) 0 var(--space-42);
}

.rc-information h2 {
  margin: var(--space-14) 0 var(--space-25);
}

.rc-next {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-26);
  padding: var(--space-35) var(--gutter);
}

.rc-next figure {
  width: 100%;
}

.rc-next figure img {
  aspect-ratio: 1.6;
}

.rc-next h2 {
  margin: var(--space-14) 0 var(--space-23);
}

.rc-next-links {
  display: block;
  margin-top: var(--space-25);
}

.rc-next .solid-link {
  width: 100%;
  min-height: 66px;
}

.rc-next .solid-link+.solid-link {
  margin-top: var(--space-14);
}
}

/* recruit */
@media(max-width:360px) {
.rc-hero h1 {
  font-size: var(--font-29);
}

.recruit-page main h2 {
  font-size: var(--font-24);
}
}

/* recruit */
.recruit-page main .rc-intro h2 {
  font-size: var(--font-31);
}

/* recruit */
@media(max-width:700px) {
.recruit-page main .rc-intro h2 {
  font-size: var(--font-25);
}
}

/* recruit */
@media(max-width:360px) {
.recruit-page main .rc-intro h2 {
  font-size: var(--font-22);
}
}

/* recruit */
.rc-work-heading>p:not(.kicker),
.rc-stories-heading>p:not(.kicker) {
  max-width: 56ch;
  margin-top: var(--space-20);
}

.rc-work-heading {
  margin-bottom: var(--space-32);
}

.rc-work-heading h2 {
  margin-bottom: 0;
}

.rc-stories-heading {
  margin-bottom: var(--space-32);
}

.rc-stories-heading h2 {
  margin-bottom: 0;
}

.rc-story-processing {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 8%;
  align-items: center;
  margin: var(--space-42) 4% 0 8%;
}

.rc-story-processing figure img {
  aspect-ratio: 1.55;
}

.rc-story-processing h3 {
  margin-bottom: var(--space-16);
}

.rc-information>div:last-child>p:nth-child(3) {
  font-weight: 600;
}

/* recruit */
@media(max-width:700px) {
.rc-work-heading {
  margin-bottom: var(--space-27);
}

.rc-stories-heading {
  margin-bottom: var(--space-28);
}

.rc-story-processing {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-24);
  margin: var(--space-30) 0 0;
}

.rc-story-processing figure {
  width: 92%;
  align-self: flex-end;
}

.rc-story-processing figure img {
  aspect-ratio: 1.3;
}

.rc-next h2 {
  text-wrap: balance;
}

.rc-growth>div>h2 {
  font-size: var(--font-26);
}

.rc-stories .rc-note {
  margin-top: var(--space-28);
}
}

/* recruit */
@media(min-width:1101px) {
.rc-hero {
  min-height: 620px;
}

.rc-hero figure {
  height: 620px;
}
}

/* phase1 */
@media(max-width:700px) {
.rc-intro h2 {
  max-width: 100%;
  text-wrap: balance;
  word-break: auto-phrase;
}
}

/* phase3 */
.p3-interviews {
  padding: var(--space-40) 0 var(--space-70);
}

.p3-interviews>header {
  max-width: 42em;
  margin-bottom: var(--space-48);
}

.p3-interviews>header h2 {
  margin: var(--space-10) 0 var(--space-20);
}

.p3-member {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: var(--space-36) 7%;
  margin: 0 0 var(--space-90);
  align-items: start;
}

.p3-member figure {
  margin: 0;
}

.p3-member img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.p3-member-one figure {
  grid-column: 1/-1;
  width: 80%;
}

.p3-member-one .p3-member-heading {
  grid-column: 1;
  padding-left: 8%;
}

.p3-member-one .p3-member-body {
  grid-column: 2;
}

.p3-member-heading .p3-member-meta {
  margin: 0 0 var(--space-12);
}

.p3-member-heading .p3-member-name {
  margin: 0 0 var(--space-22);
}

.p3-member-heading h3 {
  margin: 0;
  line-height: 1.6;
}

.p3-member-body h4 {
  font: 500 var(--font-18)/1.6 var(--serif);
  letter-spacing: .02em;
  margin: 0 0 var(--space-12);
}

.p3-member-body p {
  margin: 0 0 var(--space-26);
  max-width: 36em;
}

.p3-member-two {
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: var(--space-24) 7%;
  margin-left: 8%;
}

.p3-member-two figure {
  grid-column: 1;
  grid-row: 1/3;
}

.p3-member-two .p3-member-heading {
  grid-column: 2;
  margin-bottom: var(--space-28);
}

.p3-member-two .p3-member-body {
  grid-column: 2;
}

.p3-member-two .p3-timeline {
  grid-column: 1/-1;
  margin-top: var(--space-20);
}

.p3-timeline h4 {
  font-size: var(--font-22);
  margin: 0 0 var(--space-22);
}

.p3-timeline ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: var(--space-20);
}

.p3-timeline li {
  padding-top: var(--space-13);
  border-top: 1px solid var(--color-aabac2);
  font: 400 var(--font-14)/1.8 var(--sans);
  overflow-wrap: anywhere;
}

.p3-timeline time {
  display: block;
  font: 500 var(--font-22)/1.5 var(--latin);
  color: var(--color-ink);
  margin-bottom: var(--space-8);
  font-variant-numeric: tabular-nums;
}

.p3-timeline small {
  font-size: var(--font-14);
}

.p3-member-three {
  grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
  gap: var(--space-35) 8%;
  margin-bottom: 0;
}

.p3-member-three figure {
  grid-column: 2;
  grid-row: 1;
}

.p3-member-three .p3-member-heading {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.p3-member-three .p3-member-body {
  grid-column: 2;
}

/* phase3 */
@media(max-width:900px) {
.p3-timeline ol {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
}

/* phase3 */
@media(max-width:700px) {
.p3-interviews {
  padding: var(--space-30) 0 var(--space-45);
}

.p3-interviews>header {
  margin-bottom: var(--space-28);
}

.p3-member,
.p3-member-two,
.p3-member-three {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin: 0 0 var(--space-54);
}

.p3-member figure,
.p3-member-one figure {
  width: 100%;
  order: 0;
}

.p3-member-two figure {
  width: 86%;
  align-self: flex-end;
}

.p3-member-heading {
  order: 1;
}

.p3-member-heading .p3-member-name {
  margin-bottom: var(--space-17);
}

.p3-member-body {
  order: 2;
  width: 100%;
}

.p3-member-body h4 {
  font-size: var(--font-18);
}

.p3-member-body p {
  margin-bottom: var(--space-24);
}

.p3-timeline {
  order: 3;
  width: 100%;
}

.p3-timeline ol {
  display: block;
}

.p3-timeline li {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  gap: var(--space-20);
  padding: var(--space-12) 0;
}

.p3-timeline time {
  margin: 0;
  font-size: var(--font-21);
}

.p3-member-three {
  margin-bottom: 0;
}
}

/* phase3 */
.p3-member-heading h3 span {
  display: inline-block;
  max-width: 100%;
  word-break: auto-phrase;
}
}

@layer constraints {
/* recruit */
.rc-hero figure img {
  height: 100%;
}

.rc-story-details h3 {
  font-size: var(--font-21);
}

.rc-status {
  font-size: var(--font-19);
}

.rc-next figcaption {
  color: var(--color-mist);
}

/* recruit */
@media(max-width:700px) {
.rc-hero figure img {
  height: auto;
}
}

/* recruit */
@media(prefers-reduced-motion:reduce) {
.recruit-page main * {
  animation: none;
  transition: none;
}
}

/* recruit */
.rc-next h2 {
  font-size: var(--font-30);
}

/* recruit */
@media(max-width:700px) {
.rc-next h2 {
  font-size: var(--font-25);
}
}

/* phase3 */
.p3-member img {
  height: auto;
}

.p3-member-heading .p3-member-meta {
  font: 400 var(--font-14)/1.8 var(--sans);
  letter-spacing: .015em;
}

.p3-member-heading .p3-member-name {
  font-size: var(--font-23);
}

.p3-member-heading h3 {
  font-size: clamp(var(--font-26),2.5vw,var(--font-36));
}

.p3-member-body p {
  font-size: var(--font-16);
  line-height: 1.9;
  letter-spacing: .01em;
}

/* phase3 */
@media(max-width:700px) {
.p3-member-heading {
  padding: 0;
  margin: 0;
}

.p3-member-heading h3 {
  font-size: var(--font-26);
}

.p3-timeline {
  margin-top: 0;
}
}

/* phase3 */
@media(prefers-reduced-motion:reduce) {
.p3-interviews * {
  animation: none;
  transition: none;
  scroll-behavior: auto;
}
}
}

